Как связать числовой промежутком с градиентом?

Question

[Snelsi]

Есть элемент с числовым значением, показывающий цветом "успешность" работы.
Как можно преобразовать это число в соответствующий цвет градиента, используя вот такую шкалу?

Comments

[vaflya]

как вариант сделать градиент и показывать его частично.

а снизу в квадратах задать массив и значение цвета

от 0-3 красный
от 3-6 зеленый
от 6-9 синий

или он должен плавно цвет менять?

[Сергей Соколов]

Как именно задан основной градиент?

[Snelsi]

Сергей Соколов, В контрольных точках определённый цвет, между ними линейный градиент.

Answer 1

[Snelsi]

Немного громоздкий, но рабочий код:

// Ключевые точки градиента
const red      = [255, 30, 30];
const yellow   = [255, 215, 74];
const green    = [60, 255, 95];
const blue     = [85, 145, 255];

function to_rgb(color) {
  return `rgb(${color[0]}, ${color[1]}, ${color[2]})`; 
}

function blend_colors(color1, color2, percentage) {
  let color = [];
  for (let i = 0; i < 3; i++) { 
    color[i] = (1 - percentage) * color1[i] + percentage * color2[i];
  }
  return to_rgb(color);
}

let bgColor;
if (!value) {
  bgColor = "grey";
} else if (value >= 10) {
  bgColor = to_rgb(blue);
} else if (value >= 8) {
  bgColor = blend_colors(green, blue, (value - 8) / 2);
} else if (value >= 6) {
  bgColor = blend_colors(yellow, green, (value - 6) / 2);
} else if (value >= 4) {
  bgColor = blend_colors(red, yellow, (value - 4) / 2);
} else {
  bgColor = to_rgb(red);
}

Answer 2

[Moskus]

Два основных подхода:
- использовать предопределенный массив цветов для градиента и находить соответствие по порядковому номеру в массиве,
- задавать градиент математически (в любом цветовом пространстве с Hue - HSL, HSV), варьируя значение оттенка и сохраняя постоянными две остальные составляющие, тогда и позицию в H (то есть в оттенок) пересчитать будет не проблема по простой формуле.
https://www.w3schools.com/colors/colors_hsl.asp