Monday, 21 June 2010

A Place for Amber

So I'm working on Information Visualisation using colours, something along the line of green being good and red being bad, but have you ever tried to blend red and green? The result is vary rarely pretty so I got to thinking about how to do it. Initially I went through The Gimp and the gradient fill tool with red being the background colour and red being the foreground colour. I created an image that was 90px long and 10 high and filled it with the gradient. Created another layer with black lines every 10 px. Copied and pasted the squares between the lines into another image and let the Gaussian Blur tool go crazy before pasting the result back into the image and anchoring the layer, I did this for all 9 squares and then converted to indexed colours using the web pallette. It worked a treat to start with but when it gets near the middle there is a really rather nasty brown!

After looking and looking I realised that there was something interesting going on in terms of the hex colour codes that was generated and they each seemed to jump in increments of 33 (that's 33 hex or 51 decimal!). So there was effectively a scale going on with 00, 33, 66, 99, cc and ff being the only red and green numbers... except for near the middle (where the browns live, with there being a blue at 33). Odd ehh? Have a look:

ff0000
cc0000
993300
996600
999933
669900
66cc00
33cc00
33ff00

Got to thinking some more and ff / 9 = 1c so I could make a scale between 00 and FF using 1c increments:

ff0000
e31f00
c73b00
ab5700
8f7333
738f00
57ab00
3bc700
00ff00

But then the penny dropped! Why not look at traffic-lights and replace that there nasty brown with Amber (Or at least Orange!):

ff0000
ff3300
ff6600
ff9900
999900
99cc00
33cc00
33ff00