Как изменить цвет елемента от значения?

Question

Я получаю данные из базы с разными значениями - от 100 до 0, они я вляются процентом выполнения задачи.

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

export const getColor = (process: number) => {
    switch (false) {
        case process <= 75:
            return '#26f26a';
        case process <= 69:
            return '#0ef10e';
        case process <= 65:
            return '#4af113';
        case process <= 60:
            return '#82f113';
        case process <= 55:
            return '#baf113';
        case process <= 50:
            return '#f1f113';
        case process <= 45:
            return '#f1ba13';
        case process <= 40:
            return '#f18213';
        case process <= 35:
            return '#f14a13';
        case process <= 30:
            return '#f11313';
        default:
            return '#13fb60';
    }
};

мой пример когда, он выполняет задачу но последние значение отображает не корректно , не тот цвет который должен быть.

Дайте пример или лучшее предложение как это можно сделать.

Answer 1

Если есть возможность использовать rgb, то можно получить красивый и непрерывный вариант, без всяких проверок:

const range = document.querySelector('#range');
const block = document.querySelector('#block');

const getColor = (value) => `rgb(${255 * value / 100}, ${255 * (100 - value) / 100}, 0)`;

range.addEventListener('input', (e) => {
  block.style.backgroundColor = getColor(Number(e.target.value));
})

body {
  background-color: #777;
}

#block {
  width: 50px;
  height: 50px;
  outline: 2px solid black;
  background-color: rgb(0, 255, 0);
}

<input id="range" type="range" min="0" max="100" step="1" value="0"/>
<div id="block"></div>

Answer 2

export const getColor = (value: number) => {
    switch (false) {
        case value >= 60:
            return `hsl(${value - 10}, 100%, 50%, 0.55)`;
        default:
            return `hsl(${20 + value}, 100%, 50%, 0.55)`;
    }
};

Если кто будет искать ответ на похожий вопрос, вот еще 1 вариант как это можно сделать.

БЛОГ НА HUSL

Как изменить цвет елемента от значения?

Ответы (2 шт):