Color Charts

I am a designer and a color nerd.

Color is obviously a big part of design, and if you do any kind of digital design, then you are probably familiar with the (confusingly subtractive) RGB color system, and the (even more confusing) Hexadecimal color system. The one thing that makes working with digital colors easier is color pickers.

Creating a color chart is a difficult problem, though. Color is 3 dimensional… it doesn’t matter if it’s Red/Green/Blue, Cyan/Yellow/Magenta, or Hue/Saturation/Lightness – it’s inherently difficult to map a three dimensional system onto a flat color chart.

In the mid 90’s I wrote an article (which you can find at the bottom) explaining a little about how web colors and color charts work, how Hexadecimal works, and I offered up my first try at organizing an intuitive “Web Safe” color chart. Since then, “Web Safe” has become less of an issue, but having a good online color picker is still very useful. Through the years I’ve used new technologies to create color charts – which are what you can find below.

	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.