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

    @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);
    }
    Ответ написан
    Комментировать