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 1:42:26 PM
Very useful indeed for coming up with colour schemes. I'll be bookmarking this one!
James Bowskill @ 11/26/2005 12: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 2:10:33 PM

Add Comment

Name *:

Email Address:

(your email address is not displayed)
Website:

Comment *:



About the Author
Dennis Forbes Dennis Forbes is a Toronto-based software architect. While focused primarily on the .NET and SQL Server worlds, Dennis frequently ventures outside of this comfort zone into game development and image processing. He has been published in several industry magazines, has been quoted in the Wall Street Journal and has been interviewed by NPR.

He is a vice president and lead software architect at an innovative New York City hedge fund back-office services firm.

Dennis has been working on solutions for the financial, telecommunications, and power generation markets for over 15 years.





 

Dennis Forbes