Get hsl color with javascript

Question

If I have this:

.box{
  color: #FF3010;
  background: hsl(0,90%,40%);
}

and then this:

var box = document.querySelector(".box");
var result = document.querySelector(".result");
result.innerHTML = "BG color: "+window.getComputedStyle(box).backgroundColor;
result.innerHTML += "<br>";
result.innerHTML += "color:"+window.getComputedStyle(box).color;

The problem is that it always prints the values in rgb. So, I have 2 questions:

Is it posible to get the value as written in the css?
Is it posible to force the color to be hsl instead of rgb?

http://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion ? — Sergiu Paraschiv, May 25 '15 at 14:19
That is interesting very interesting but I still want to know answer to question 1 and also if there is a way to force that. — Vandervals, May 25 '15 at 14:55
You can get the exact CSS definition for a selector: http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Sergiu Paraschiv, May 25 '15 at 15:07

score 0 · Answer 1 · edited Jun 01 '20 at 16:55

you have two method get the live style of a dom element(not css), but you can not get hsl, but only rgb/rgba string.

var style = window.getComputedStyle(element).getPropertyValue('background-color')

var style = cell.computedStyleMap().get('background-color').toString();

ask your question:

you can get it from two way:

a. use CSSAPI. you can see doc on mdn.

b. use mutationobserver, you can from oldvalue get it, if the value be changed by something.
you can not get hsl directly, but you can get rgb by two way as above. and than change them to hsl, and if your hsl is match the html format, you can use hsl directly. the html format hsl not [0-1], but h is [0-360], and s & l with the %.

btw i just try to use hsl in web, but it is not match reality. yellow is more lighter than purple, and green is more lighter than blue. rgb(0, 255, 0) is more more lighter than (123, 0, 123), although the last is lighter than the above in hsl.

Get hsl color with javascript

1 Answers1

Linked