Take the 2-minute tour ×

Edit: It may not all be to do with the length of the color value as you guys are saying. Because even if I add this line it still doesn't change the background on Safari like it should:

newEle.style.background = "-webkit-gradient(linear, left top, right top, from(#2F2727), to(#FF0000))";

I am dynamically setting a HTML p elements background color.

My Problem: When I go to store a string(Returned from my function) in ele.style.backgroundColor it doesn't stay or change the background color. I am unsure why my function cannot change the background color of this element to black?


    <div id="mainContent">
        <p id="test">abcdef</p>

    <script type="text/javascript">

        function decimalToHex( num )
           // num is usually a decimal color in form ARGB

           if (num == null || num == "undefined") { return "#FFFFFF"; }

           var intNum = (parseInt(num,10)) & 0x00FFFFFF;
           return "#"+intNum.toString(16);

        var newEle = document.createElement("p"); 
        newEle.style.backgroundColor = decimalToHex(0); // this fails doesn't set the background color
        //newEle.style.backgroundColor = "#FF0000";       // But this works & sets it to red. Whats wrong with my function?!
        newEle.innerHTML = "kjdskjdkgj";
share|improve this question
try to paste the script code in body or head tag you are trying out of the body tag may be this is creating a problem. –  Unknown Nov 1 '11 at 3:31
Your function is outputting "#0" for decimal 0, which is not a valid css color. #000 or #000000 are the legal ways to represent Black with hex notation. I'm not sure I understand how you're representing RGB with an integer. Can you explain? –  ddrace Nov 1 '11 at 3:39
Read the CSS spec for how to specify colours. –  RobG Nov 1 '11 at 4:20

2 Answers 2

You will need to pad the result with zeros since your function will just return #0 with the argument 0.

Do something like.

var s = intNum.toString(16);
while(s.length < 6) s = "0" + s;
return "#" + s;

Edit: your function is correct, but you need to pass in a correct parameter. It needs to be a 3 or 4 byte integer where the last 3 bytes are the r, g and b values respectively, i.e. not 0 but something like 0x00DEFEED which is 14614253 in decimal.

You even say in a comment that the number is in the form ARGB, and assuming those are each 1 byte then this is correct.

share|improve this answer
The length has to be 2, since the color is 3 numbers of 2 digits each concatenated in one string, it isn't one number. –  RobG Nov 1 '11 at 3:41
Doesn't he want a string in form.of #RRGGBB? I realize there is a problem with my method, but the overall number portion has length 3*2=6 –  jli Nov 1 '11 at 3:47
Actually his function is right, he's just using it wrong. If he passed in a 4 byte integer where the last 3 bytes are actually each 1 byte integers, it would work. –  jli Nov 1 '11 at 3:53
that's correct, but it's 3 separate numbers, you can't just padd on the left or you might shift the number to the right, e.g. #ff becomes #0000ff which goes from red to green. –  RobG Nov 1 '11 at 6:23
Which is why his input is wrong. It should only ever be passed a parameter that has at least 3 bytes (1 each for RGB). In that case the padding thing is unnecessary except for the R byte. –  jli Nov 1 '11 at 14:49

The colour has three components, your function returns only one. Have the function return just the number padded with a leading zero if necessary:

       var intNum = '' + (parseInt(num,10)) & 0x00FFFFFF; 
       intNum = intNum.toString(16);
       if (intNum.length < 2) intNum = '0' + intNum;
       return  intNum;

Then build the colour string:

newEle.style.backgroundColor = '#' + decimalToHex(255) + 
                                     decimalToHex(0) + decimalToHex(0);


Note that color in ah HTML page is specified in various ways but it always has 3 components: red, green and blue. It is always a string.

As Hex: #rgb or #rrggbb

In this case, the leading # indicates hex values. If there are only 3 following characters, then each character represents one value for red, green and blue. If there are 6 characters, each pair represents one value.

As decimal: rgb(r, g, b)

In this case, the values are comma separated and each value can be one, two or three characters.

As percent: rgb(10%, 15%, 20%)

In this case, the values are comma separated and represent the percentage of each color.

It's all in the CSS specification

share|improve this answer
Problem is I have a long decimal that is in the form ARGB. Is it possible to break that up into the A, R, G, B values? –  Jake M Nov 1 '11 at 3:54
RGB is three values from 0 to 255 (in decimal) or 0 to FF (hex). I don't know what A is. You have to convert each value separately. I would split the string into components, convert each, then put it back together. Provide some examples of values and how you want them processed. –  RobG Nov 1 '11 at 4:11

Your Answer


