How can you change the color from green to red with only the number 0-40 as input?

Question

PHP

Good afternoon.
I ask you for help in the form of an algorithm or maybe a piece of code.
I need to visualize the expiration date of a product. At the input, I have only the number of days of delay from 0 to ~40.
I would like to get the color depending on the timing: 0 - green, 20 (middle) - yellow, 40 - red.
It would be possible to set tabular, but this is already the most extreme variant.

Thank you in advance.

Answer 1

Read about the color model not in RGB but in HSV.
en.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)
In short, you will have
0 -> H = 120 S = 100 V =100
20 -> H = 60 S = 100 V =100
40 -> H=0 S=100 V=100

Answer 2

Yes, a simple linear interpolation of each of the three components, and business.

Answer 3

if RGB, then something like this algorithm:

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

If in RGB, then something like this:

  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;

Input - t (from 0 to 40)
from* - components for the initial color,
to* - components of the final color.
The output is R, G, B (from 0 to 255 each) of which you then collect the color.

Answer 5

jsfiddle.net/weageoo/9G4WK/3/

Answer 6

The easiest option is to overlay a green image on a red background (or vice versa) and change the transparency.

Answer 7

0 is green RGB = (0, 255, 0)
20 is yellow RGB = (255, 255, 0)
40 is red RGB = (255, 0, 0)
This shows that from 0 to 20 - the R component grows from 0 to 255 (and G stands at 255).
And that from 20 to 40, the G component decreases from 255 to 0 (and R stands at 255).
Both are expressed in terms of proportion: for example, if the input number is N <= 20, then R will be equal to N*255/20,
and if the input number is N> 20, then G = (20-(N-20))* 255/20
(N-20) subtracts the starting 20 from our number
. we need from 20 to 40 - G fell.
and so this is the same proportion as for R.

Answer 8

You don't need HSV. Everything is so very simple. At 0 - 20, the r component should increase linearly from 0 to 1, and at 20 - 40, the g component should decrease linearly from 1 to 0.
r = 1 / clamp (x, 0, 20)
g = 1 - 1 / clamp (x- 20, 0, 20)
b
= 0

Answer 9

Thanks to everyone, especially Yavanosta for the tip on HSV - I learned a lot.
Everything was solved by finding two functions that converted hsv>rgb and rgb>hex, respectively, merged everything into one, and something like this came out: pastebin.com/AGq7yjam
It turned out monstrously, but it works very quickly.