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.

image of browser console showing the background-color to use RGB

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?

2 Answers

0
window.document On

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())

0
Community On

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!