How to set hsl color on CSSStyleDeclaration object?

//CSS
background-color: hsl(155,100%,30%);

//JavaScript
divElement.style.backgroundColor = ?;

I don't want to use HEX value or color name in javascript.

Please suggest.

W3C standard link would be a great help too.

i hesitate to set hsl string as I didn't find it in W3C CSSOM or DOM standard.

How to set hsl color on CSSStyleDeclaration object?

//CSS
background-color: hsl(155,100%,30%);

//JavaScript
divElement.style.backgroundColor = ?;

I don't want to use HEX value or color name in javascript.

Please suggest.

W3C standard link would be a great help too.

i hesitate to set hsl string as I didn't find it in W3C CSSOM or DOM standard.

• javascript
• css
• hsl

2 Answers 2

Just set it as a string

divElement.style.backgroundColor = "hsl(155,100%,30%)";

Demo: http://jsfiddle.net/maniator/gg7JN/

You want the w3 standard, section 4.2.4.

Examples copied from the site:

• { color: hsl(0, 100%, 50%) } /* red */
• { color: hsl(120, 100%, 50%) } /* lime */
• { color: hsl(120, 100%, 25%) } /* dark green */
• { color: hsl(120, 100%, 75%) } /* light green */
• { color: hsl(120, 75%, 75%) } /* pastel green, and so on */

Note: I'm not saying Neal's answer is wrong - you can simply use an hsl string as Neal said. These examples are for css files.

The actual line you want that allows you to use css-style hsl as easily as hash colors or rgb is standard section 4.0, which simply says:

A <color> is either a keyword or a numerical specification.

The sections after that then define the types of colors: keywords (fuchsia), hash format (#ffcc88), rgb/a format (rgba(255,255,255,0.1)), or hsl/a format (hsla(0, 100%, 50%, 0.9)). Any of these can be used any time a css color is needed.