Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?

Question

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?

Answer 1

As per the spec:

If the value is translucent, the computed 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 computed 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 computed back to rgba.