Получить значения цветов из процентов - PullRequest
Новая
       68

Получить значения цветов из процентов

0 голосов
/ 20 января 2020

Мне нужно получить цвет в процентах от 0% до 200%.

Вот палитра градиента

Gradient

My фактический алгоритм принимает 5 градиентов цвета 

percentageToColor(perc) {
  perc = Math.trunc(perc);
  perc > 200 ? (perc = 200) : '';
  const hue = 200 - perc;
  return `hsl(${hue}, 100%, 50%)`;

Я не вижу, как его адаптировать, чтобы получить только 2 цвета градиента (тот же синий от 0 до 100%, затем начинайте добавлять красный красный, на 200% все красный)

Лучше всего сделать так, чтобы градиент цветов был обобщенным c, но специфика c синего и красного тоже хороша.

Я не нашел ни одной библиотеки для этого.

1 Ответ

1 голос
/ 21 января 2020

Рассчитайте красный и синий аспекты RGB на основе полученного вами процента, затем вставьте их в значение rgb.

Вот рабочий пример: 

window.onload = function() {
  let colorShower = document.querySelector('.color-shower')
  let colorSlider = document.querySelector('#colorSlider')
  let blueAspect = percentage => Math.round(255 * (1 - (percentage - 1) / 200))
  let redAspect = percentage => Math.round(255 * (percentage - 1) / 200)
  let percentage = colorSlider.value
  let buildColor = (redAspect, blueAspect) => `rgb(${redAspect}, 0, ${blueAspect}`
    
  colorShower.style.backgroundColor = buildColor(redAspect(percentage), blueAspect(percentage))
  
  colorSlider.addEventListener('input', e => {
    percentage = colorSlider.value
    colorShower.style.backgroundColor = buildColor(redAspect(percentage), blueAspect(percentage))
  })
}
.color-shower {
  width: 100%;
  height: 50px;
}

.color-slider {
  width: 100%;
}
<div class = "color-shower"></div>
<input type = "range" min = "1" max = "200" value = "1" class = "color-slider" id = "colorSlider">
...