I am not sure if I am missing something obvious but can somebody explain this to me? The following snippet is from what I did on Chrome DevTools Console. Same is the result for Firefox.

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style=​"background:​ rgb(187, 187, 187)​;​">​</div>​
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style=​"background:​ rgb(63, 191, 63)​;​">​</div>​

Here's the image for better readability.

Is this the standard behaviour? If so, how do I get to put the real HEX or HSL value in inline style?

I am not sure if I am missing something obvious but can somebody explain this to me? The following snippet is from what I did on Chrome DevTools Console. Same is the result for Firefox.

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style=​"background:​ rgb(187, 187, 187)​;​">​</div>​
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style=​"background:​ rgb(63, 191, 63)​;​">​</div>​

Here's the image for better readability.

Is this the standard behaviour? If so, how do I get to put the real HEX or HSL value in inline style?

• javascript
• html
• css
• browser
• colors

• Because that is what browsers do. Why do you need it in hex? – epascarello Commented Aug 29, 2016 at 14:33
• so that I can later query it back in the same form I set it. With the existing behaviour, I have to either convert it back or maintain a separate data attribute – Praveen Puglia Commented Aug 29, 2016 at 14:56
• Or use a css class and not worry about it. Than if you need to see if it has XYZ color, you would know to look for XYZ class instead. – epascarello Commented Aug 29, 2016 at 14:57
• I can't do that in my case because all the elements are generated from a data set which is just an array of colors in different formats. Strings. I would be okay with browsers behaving that way but I would like to know why they do it or a pointer to a spec that says it's what browsers should do. – Praveen Puglia Commented Aug 29, 2016 at 15:00
• 1 The workaround I have is a data- attribute because I do not want to perform a putation for color conversion. :( – Praveen Puglia Commented Aug 29, 2016 at 16:32

2 Answers 2

As per the spec:

If the value is translucent, the puted value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one.

Meaning that no matter what is your input, the puted value always results in either rgb or rgba.

So, answering your question: yes, it is standard behaviour and no, you can't use hex or hsl as it will be puted back to rgba.

My solution is... to use "outerHTML" ! It's the only place from where we can extract the genuine color format.

function realBkgColor(elem){
    let outer = elem.outerHTML.replace(/\s/g,'');
    let tag = outer.split('<'+elem.tagName).pop().split('>')[0];
    let style = tag.split('style="').pop().split('"')[0];
    let color = style.split('background-color:').pop().split(';')[0];
    return color;
}
div = document.querySelector('div');
div.innerHTML = realBkgColor(div);

returns "#ffff00" and not "rgb(255, 255, 0)"

<div style="background-color: #ffff00"></div>
<!--
<div style="background-color: rgb(255, 255, 0)"></div>
<div style="background-color: hsl(60, 100%, 50%)"></div>
<div style="background-color: yellow"></div>
-->

Try it with these...