Color Charts

I am a designer and a color nerd.

I've had a kind-of lifelong obsession with trying to make a color chart / chooser tool. It stems from the fact that the RGB color space is so horribly un-intuitive; yet, as an interaction designer, I have to use it all the time. The most up-to-date color tool I have made is hsLab, and I encourage you to check that out.

In the meantime, here are some of my past attempts to tackle this color-charting problem.



HTML5 HSL ColorChart

HTML5 is here! And it allows for some cool dynamic interactions with the new Canvas element. This color chart is 100% canvas – and be sure to go into settings and turn on “disco mode” for a crazy color show.



Silverlight HSL ColorChart

Silverlight is pretty slick, and I was (finally!) able to rotate the HSL triangle 45 degrees – something that is closer to my visualization of the color space, at least. I also used this to learn Expression Blend, which is a pretty cool tool.



HTML HSL ColorChart

Not quite satisfied with my static “Web Safe” color chart, I turned to JavaScript for some extra interaction. It turned out to be a lot of complex math to dynamically generate color gradients, but this was my first real foray into dynamic color charts.



"Web Safe" ColorChart

The original static “Web Safe” color chart, this is 256 HTML Table cells lovingly hand-coded and laid out in a fashion that I believed was more intuitive than existing color charts.



Introduction to "Web Safe" and Hexadecimal colors

This article went along with my first color chart which you can find above. Some of the discussion is outdated, but much of the Hexadecimal and color space content is still good, and hopefully interesting to fellow fledgling color nerds.