| The Color Wheel |
| Thursday, 21 June 2007 00:00 | |||
|
I've always been used to thinking of colors in terms of RGB (red green blue), since it is generally how you specify colors when working with most web-based technologies. However, recently when working on selecting colors for our web site, I learned some tricks using HSB (hue saturation brightness) that makes it much easier to select colors that match. HSB is supported by Photoshop, which is the tool I've been using. I've also found a pretty neat online tool called yaflaColor that lets you work in HSV (which I assume is similar to HSB). You might want to follow along using this tool, and try out some of the examples. The first thing that is great about HSB is that it is very easy to select a complimentary color. First, I should point out that your hue value is going to range from 0 to 360, representing the number of degrees in a circle (sometimes called the Color Wheel). Saturation and brightness will range from 0 to 100%. Next, say that you have already selected one color. To pick the compliment, all you need to do is select a hue that is on the opposite side of the circle, by adding (or subtracting) 180 degrees, and leave the saturation and brightness the same. That's all there is to it! We learned about complimentary colors in pre-school, and now I finally understand how to mathematically select them. Next, you'll notice that the yaflaColor picker shows you the split complimentary and triad colors. These are other forms of colors that will go with your original color. For split complimentary you should add (or subtract) 150 degrees to the hue, and for triad you should add (or subtract) 120 degrees. If you continue to slide the hue up and down, but keep the saturation and brightness, you'll notice that all the colors that are produced have the same quality and, well, just sort of match. Hopefully by this point, you're starting to see how using HSB is a much better way to select colors than by using the RGB value. Another trick is to keep the hue and slightly adjust the brightness OR saturation. This will give you a set of monotone colors that you can use to produce an effect similar to what you see at the top of this blog. Once I got out of the mindset of using RGB colors, or trying to randomly choose colors that I thought matched, it became much easier to pick a color scheme that went well together. Hopefully you will find the same!
|