How do I force CSS to use/display hsl values instead of RGB using JavaScript?

Question

I'm making a color game via a course which generates 6 squares with random colours. When you click on a square which corresponds with the target color, you win the game.

Here's a link to how the game should work using RGB:

https://jsfiddle.net/jdwrgbh0/

I'm using HSL values instead.

Here's my code using HSL:

https://jsfiddle.net/fh7boykd/

(The only difference is this code for generate random colors)

function randomColor() {
    var h = Math.floor(Math.random() * 361);
    var s = Math.floor(Math.random() * 101);
    var l = Math.floor(Math.random() * 101);
    return "hsl(" + h + ', ' + s + '%' + ', ' + l + '%' + ")";
}

Even though I used the function above to generate HSL values, the background-color of the squares still shows RGB values instead of HSL values and as such, I can't win the game because the target color is never shown. I want the color of the squares to display background-color in HSL and not RGB. The above randomColor function seems fine and testing it in the console, it does seem to generate a random color after it's invoked each time.

Here's an image of the console when I run the code. The background-color is in RGB and not HSL.

I think the problem may be related to this function:

function changeColors(color){
    //loop through all squares
    for(var i = 0; i < squares.length; i++){
        //change each color to match given color
        squares[i].style.background = color;
    }
}

This code changes the color of each square. When I look at the browser console, it shows RGB values instead of HSL values. How do I force squares[i].style.background = color; to use HSL instead of RGB?

Possible duplicate of [How to set hsl color on CSSStyleDeclaration object?](https://stackoverflow.com/questions/17792418/how-to-set-hsl-color-on-cssstyledeclaration-object) — weegee, May 18 '19 at 12:51
Setting hsl via javascript doesn't appear to preserve the hsl format when it's set as an inline style. You might want to use a [data-attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to store the color and reference that instead of the style. — Khauri, May 18 '19 at 12:53
you need to use RGB <=> HSL conversions, but HSL colors (when the number is Integer) is less accurate than RGB __ data-attribute is also a good idea — Mister Jojo, May 18 '19 at 12:54
Per my previous comment, check this fiddle: https://jsfiddle.net/cmbkj3up/ — Khauri, May 18 '19 at 12:57
Does it matter whether the color is expressed as HSL or RGB? The browser will render it to the screen the same way... — Heretic Monkey, May 18 '19 at 13:14
@HereticMonkey The point of the program is for people to guess which square the target hsl colour refers to. In this case, I'd much prefer the colour to be expressed as hsl. — mokkyun, May 18 '19 at 20:25
@KhauriMcClain data-attribute seems to seems work, just like in your Fiddle. Thanks! — mokkyun, May 18 '19 at 20:27
@window.document Thanks but not exactly. As one of the comments mentioned, in the DOM the value is converted back from hsl to rgb. — mokkyun, May 18 '19 at 20:27

score 0 · Answer 1 · answered May 18 '19 at 13:08

0

The browser will convert your HSL back to RGB colors. From what I see in your question, you are using HSL just so you can generate random colors. You can also use this piece of code to generate random hex color code

var generateRandomHexColor = () => {
  var allPossibleLetters = '0123456789ABCDEF';
  var HexCode = '';
  for (var i = 0; i < 6; i++) {
    HexCode += allPossibleLetters[Math.floor(Math.random() * 16)];
  }
  return '#' + HexCode;
}
console.log(generateRandomHexColor())

answered May 18 '19 at 13:08

weegee

3,256
2
18
32

Thanks for the snippet. I'd rather have the DOM display hsl values instead of hex code values, as the point of my program is for users to guess which square corresponds to the target hsl value. – mokkyun May 18 '19 at 20:28

score 0 · Answer 2 · answered May 18 '19 at 13:15

I believe your question is that you want to be able to convert RGB to HSL and then understand that HSL value. This is entirely possible. I have found some js script off of github, from user mjackson.

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;

  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }

    h /= 6;
  }

  return [ h, s, l ];
}

You may be able to adapt this to the way that you wish. I hope this helped.

Cheers!

Thanks for the reply. I'm actually trying to use HSL values natively in my code. What I want to do is have the `background-color` value for the squares to use and display HSL instead of RGB. — mokkyun, May 18 '19 at 20:22

score 0 · Answer 3 · answered May 06 '20 at 09:25

0

if you want to set as hsl, just like this format:

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

but you want to got the style, that must be rgb or rgba string. so you must change it to hsl by your self.

answered May 06 '20 at 09:25

defend orca

617
7
17

How do I force CSS to use/display hsl values instead of RGB using JavaScript?

3 Answers3