HSL / RGB and The Color Space of Images

[UPDATE 2005-10-26 : One of the web tools is available athttp://www.yafla.com/yaflaColor/ColorRGBHSL.aspx]

I have a couple of fun little web services that I worked on overthe weekend that I’m going to stick on here in the coming days. Oneis a simple utility that allows you to punch inHue/Saturation/Lightness (e.g. 327 degrees, 75% saturation, 55%lightness), or alternately an RGB combo (e.g. #8C235C), and itgives the alternative encoding (e.g. from RGB to HSL, or viceversa). Additionally, and usefully, it provides a listing ofsaturation/lightness variations so you can easily get correlatedshades and saturations for color themes. This is really scratchingmy own itch, as I constantly find myself picking a base color, andthen manually, and imprecisely, varying the RGB components toform a theme (e.g. a slightly lighter variation for a side element,a darker one to go behind another element, and so on).

HSL is a vastly superior way of dealing with colors,and is extraordinarily more intuitive than the 24-bitcolor-space RGB (e.g. #FF0000). Eventually HSL will be widelyavailable via CSS 3,which means that you should be able to use it natively byaround 2009 (if only I were joking…). HSL breaks color into itshue, which is from 0 to 360 degrees, saturation from 0 – 100%, andlightness from 0 – 100%. Understanding the relationshipbetween RGB and HSL was eye opening to me, and I discovered that Ihad significant misperceptions about how they correlated.

To add to the usefulness, it also gives complimentary and triadcolors, as well as complete color sets for your themeing fun basedupon common color theory. Each of the colors are linked to be thenew base color, so you can browse around to find the perfectcollection. Fun little tool.

One other micro-application that I’m releasing, as adownloadable Win32 command-line EXE, is a tool that gives aweighted “suggested photo environment”. It analyzes an image, usingan outer weighting that you select, and recommends a coreenvironment HSL for it to be contained within. You can then usethat to create a color theme, and make gorgeous aestheticallypleasing pages, such that Flickr often does.

This tool alternately allows you to monotone an image to a givenhue if that’s your desire. e.g. to make a photo fit within anexisting color theme. This will be a very easy, lightweight, freemethod of doing what you can do in most good imaging apps.

Anyways, just a “weekend update”. This work was all for someR&D of something much different.