I have to display a number whose color changes from Red to Green uniformly as the value of the number decreases.
Is there any way to generate the font color of that number according to the value ?
A:
I would approach this using CSS. I would create a set of styles, in the gradients of the colours that you need. Then using javascript I would apply the style which matched the number.
This way you can seperate your presentation, structure and js logic from each other, whilst keeping your js simple :)
DavidYell
2010-08-17 10:46:23
A:
Decreasing number equals red to green, I'd guess?
Why not make it simple, start out with your all red #FF0000, and work yourself down to green at #00FF00?
Between the two there are FF*FF (256*256 = 65536) steps; adapt this to your needs and the JavaScript needed to get color should be simple.
ColorCalc - Nice tool for playing with/understanding hex v colors
Morten Bergfall
2010-08-17 10:54:51
got it ... :) Thanks
lakshmanan
2010-08-17 10:59:29
cool! Colors are fun (at least when not having to be a designer ;-)
Morten Bergfall
2010-08-17 11:00:45
You won't have that many steps if you want it to look like a smooth transition (instead of 256 cycles of red->green, light->dark). What you'll probably want to do is use colors of the same brightness and saturation, but just shift the hue. Brightness should be the average of the R/G/B channels; to calculate the saturation, you take the distance between a color and its equal-valued grey color (i.e. `(brightness, brightness, brightness)`). Adding the difference between each channel should give you the saturation, _I think_.
Lèse majesté
2010-08-17 11:29:34