Как можно менять цвет от зеленого к красному, имея на входе только число 0-40?

Question

[rechmp]

Добрый день.
Прошу у вас помощи в виде алгоритма или, может, куска кода.
Мне нужно визуализировать просроченность товара. На входе я имею только число дней просрочки от 0 до ~40.
Хотелось бы в зависимости от сроков получать цвет: 0 — зеленый, 20(середина) — желтый, 40 — красный.
Можно было бы задать таблично, но это уже самый крайний вариат.

Заранее спасибо за помощь.

Answer 1

[Дмитрий Гукетлев]

Почитайте про модель цвета не в RGB а в HSV.
ru.wikipedia.org/wiki/HSV_(%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%8C)

Если в кратце, то у вас будет
0 -> H = 120 S = 100 V =100
20 -> H = 60 S = 100 V =100
40 -> H = 0 S = 100 V =100

Answer 2

[merlin-vrn]

Да простая линейная интерполяция каждой из трёх компонент, и делов.

Answer 3

[phil_tsarik]

если RGB, то примерно такой алгоритм:

if (x >= 20 && x <= 40) {
  g = ( abs((x-20)-20) ) / 20;
  color = Color(1.0, g, 0.0);
} else if (x >= 0 && x < 20) {
  r = x / 20;
  color = Color(r, 1.0, 0.0);
}

Answer 4

[Nikita Permin]

Если в RGB — то как-то так:

	max      = 40;

	fromR  = 0;
	fromG  = 255;
	fromB  = 0;

	toR    = 255;
	toG    = 0;
	toB    = 0;

	deltaR = Round((toR - fromR) / max);
	deltaG = Round((toG - fromG) / max);
	deltaB = Round((toB - fromB) / max);

	R      = fromR + t * deltaR;
	G      = fromG + t * deltaG;
	B      = fromB + t * deltaB;

На вход — t (от 0 до 40)
from* — компоненты для начального цвета,
to* — компоненты конечного цвета.
На выходе — R,G,B (от 0 до 255 каждый) из которых потом собираете цвет.

Comments

[Nikita Permin]

Упс… не прочитал полностью вопрос и не учел желтый цвет =(

[p1nger]

В случае желтого цвета по середине — тот же алгоритм только на двух отрезках: от зеленого к желтому, и от желтого к красному.

Answer 5

[Weageoo]

jsfiddle.net/weageoo/9G4WK/3/

Comments

[Weageoo]

Во jsfiddle.net/weageoo/9G4WK/10/

Answer 6

[Chamie]

Самый простой вариант — наложить зелёную картинку на красный фон (или наоборот) и менять прозрачность.

Answer 7

[Дмитрий Тимофеев]

0 — это зеленый цвет RGB = (0, 255, 0)
20 — это желтый цвет RGB = (255, 255, 0)
40 — это красный цвет RGB = (255, 0, 0)

Отсюда видно, что от 0 до 20 — растет компонента R от 0 до 255 (а G стоит на 255).
И что от 20 до 40 — убывает компонента G от 255 до 0 (а R стоит на 255).
И то, и другое выражается через пропорцию: например, если входное число N <= 20, то R будет равно N*255/20,

А если входное число N>20, то G = (20-(N-20))*255/20
(N-20) отнимает от нашего числа стартовые 20.
а 20-(N-20) инвертирует рост компоненты в убывание, т.к. нам надо чтоб от 20 до 40 — G падало.
а так это та же самая пропорция, что и для R.

Answer 8

[xanep]

Вам не нужно HSV. Все и так предельно просто. При 0 — 20 должна компонента r линейно возрастать от 0 до 1, а при 20 — 40 компонента g линейно убывать от 1 до 0.

r = 1/clamp(x, 0, 20)
g = 1 — 1/clamp(x-20, 0, 20)
b = 0

ф-ию clamp напишете сами

Answer 9

[rechmp]

Спасибо всем, особенно Yavanosta за наводку на HSV — узнал много нового.
Решилось все тем, что нашел две функции, которые конвертили hsv>rgb и rgb>hex соответственно, слил все в одну, и вышло что-то такое: pastebin.com/AGq7yjam
Вышло монстроузно, но работает весьма быстро.