robot campfire » graphics http://www.planetraven.de/blog davids weblog Sun, 10 Jan 2010 19:46:22 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 http://creativecommons.org/licenses/by-nc-sa/3.0/de/ Using HSV to build a traffic light http://www.planetraven.de/blog/2009/09/27/using-hsv-to-build-a-traffic-light/ http://www.planetraven.de/blog/2009/09/27/using-hsv-to-build-a-traffic-light/#comments Sun, 27 Sep 2009 21:19:36 +0000 David http://www.planetraven.de/blog/?p=86 A small tip for anyone working on some sort of data visualization. If you have values that lie between 0.0 and 1.0 (or 0% and 100%, or $some_value and $some_other_value), you can use a simple interpolation in the HSV (or HSB) color space to get a nice “traffic light” range of colors from red to green via yellow in the middle, which is fine for displaying something that is “OK” if the values are low and gets “critical”  or “dangerous” for higher values (or vice versa). Just set the saturation and value (or brightness) parameters to 100% and use your data to vary the hue between 0° (which means red) and 120° (which is green). Since yellow sits right in the middle of that scale at 60° this gives you a smooth transition from red to yellow to green, which may look like this:

hue scale from 0° to 120°

hue scale from 0° to 120°

Now this might be common knowledge, but i just stumbled upon it some time ago and thought it was a useful tidbit that i wanted to share.

]]> http://www.planetraven.de/blog/2009/09/27/using-hsv-to-build-a-traffic-light/feed/ 0 http://creativecommons.org/licenses/by-nc-sa/3.0/de/