Как заставить CSS использовать / отображать значения hsl вместо RGB с использованием JavaScript? - PullRequest
Новая
       73

Как заставить CSS использовать / отображать значения hsl вместо RGB с использованием JavaScript?

0 голосов
/ 18 мая 2019

Я делаю цветную игру через курс, который генерирует 6 квадратов со случайными цветами.Когда вы нажимаете на квадрат, соответствующий целевому цвету, вы выигрываете игру.

Вот ссылка на то, как игра должна работать с использованием RGB:

https://jsfiddle.net/jdwrgbh0/

Вместо этого я использую значения HSL.

Вот мой код, использующий HSL:

https://jsfiddle.net/fh7boykd/

(единственное отличие - этот код для генерации случайных цветов) 

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 + '%' + ")";
}

Несмотря на то, что я использовал вышеописанную функцию для генерации значений HSL, background-color квадратов по-прежнему показывает значения RGB вместо значений HSL, и поэтому я не могу выиграть игру, потому что целевой цветникогда не показывается. Я хочу, чтобы цвет квадратов отображался background-color в HSL, а не в RGB. Вышеприведенная randomColor функция выглядит нормально, и, проверяя ее в консоли, она генерирует случайный цвет после вызовакаждый раз.

Вот изображение консоли, когда я запускаю код.background-color в RGB, а не в HSL.

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

Я думаю, что проблема может быть связана с этой функцией: 

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;
    }
}

Этот код меняет цвет каждого квадрата.Когда я смотрю на консоль браузера, она показывает значения RGB вместо значений HSL.Как заставить squares[i].style.background = color; использовать HSL вместо RGB?

Ответы [ 2 ]

0 голосов
/ 18 мая 2019

Я полагаю, что ваш вопрос в том, что вы хотите иметь возможность конвертировать RGB в HSL, а затем понять это значение HSL.Это вполне возможно.Я нашел несколько js-скриптов от github от пользователя 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 ];
}

Возможно, вы сможете адаптировать это так, как вам нравится.Я надеюсь, что это помогло.

Ура!

0 голосов
/ 18 мая 2019

Браузер преобразует ваш HSL обратно в цвета RGB. Из того, что я вижу в вашем вопросе, вы используете HSL только для того, чтобы генерировать случайные цвета. Вы также можете использовать этот фрагмент кода для генерации случайного шестнадцатеричного цветового кода 

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