Dennis Forbes on Pragmatic Software Development
Subscribe to RSS
 
Wednesday, October 26 2005

On Monday I mentioned an online HSV/RGB color conversion tool that I would be making available shortly: You can now find it at http://www.yafla.com/yaflaColor/ColorRGBHSL.aspx.

It's pretty trivial, but it might be useful for someone, so I thought I'd release the URL. There is much more that I planned on doing with it before releasing, but a nasty bug (the flu kind) has prevented that, so I'm releasing it as-is for now. It will likely improve over the coming weekend if I get any spare time.

ex. http://www.yafla.com/yaflaColor/ColorRGBHSL.aspx?RGB=9cceef

[alternately you can pass the H, S, and V variables]

You will get several other colours in addition to your selected colour: Not only will you get a grid of saturation and value variations for the current hue, but you'll also get convenience grouping colors based upon general color theory.

  • Complementary color - This is the opposite color of the selected hue on the color wheel.
  • Triad colors - These are the two pair colors equi-spaced on the color wheel with your selected color. Some believe these three make a good combination.
  • Analog colors - These are the hues to either side of the selected color. Again, some believe this makes for a nice color combination.
  • Split complementary colors are the analogs to the compliment of your selected color. Some believe that these two with your selected color make a great color theme.

This tool is not complex, and I'm not intending it to be taken as Earth shattering - it's simply scratching my own itch: I often find myself in need of varying saturations of a particular color, or an easy way to get aesthetically pleasing partner colors. There are lots of alternatives, but this was my own lightweight, easy option.

The colors on the page are clickable, so you can browse around. As an aside, the div layout works best in Opera (where groupings are actually grouped), but comes through as a vertical column in Mozilla and Internet Explorer (UPDATE: I've put aside any DIV purity, and just used a table. It now works in all of the major browsers properly). This was just a humor thing and I haven't had the time and opportunity to diagnose why those browsers aren't doing what they should be doing.

[SEE ALSO: yaflaColor goes AJAX & yaflaColor Updates]

Reader Comments

AWESOME! I have a win32 app I use but I'm definitely bookmarking this. Sweet.
Thank You! @ 11/2/2005 11:54:40 AM
Great app! I found it through the link on your /. sig... thanks!
Michael @ 11/13/2005 2:42:26 PM
Very useful indeed for coming up with colour schemes. I'll be bookmarking this one!
James Bowskill @ 11/26/2005 1:59:10 AM
Isn't it actually HSV (Hue, Saturation, Value) that you're converting to/from? In the HSL color space, 100% lightness is always white, regardless of hue and saturation. In HSV (sometimes called HSB where the B is for Brightness) you get white only with maximum value and no saturation.

At least, that's the way I've always understood it, and it's what I find at Wikipedia (http://en.wikipedia.org/wiki/Color_space)
Aaron @ 1/19/2006 3:10:33 PM

Add Comment

Name *:

Email Address:

(your email address is not displayed)
Website:

Comment *:


Dennis Forbes - Dennis Forbes is a Toronto-based software architect and technology writer