Good use of colors make a huge difference in the appearance of web sites, or in any design. If you pay attention to really pretty sites you will see good usage of colors. The basics of good color management involves what is referred to as the "color wheel", shown here.

Its created by taking the ends of the visible spectrum (red and violet) and joining them in a circle. Once this is done, some interesting relationships are created. For instance, any two colors on opposite sides of the color wheel are contrasting.

Contrasting colors have a natural visual tension that you can use to highlight and bring focus to an area.

If you place a triangle inside the color wheel the three colors that it touches form complementary colors. Complementary colors look good together and are good for forming the major color scheme for a page.

If you've been doing web pages for a while you are used to specifying a color as values of Red, Green and Blue in an RGB triplet like #FFE904, with values for each color ranging from 0 to 255, or 0 to 0xFF. This is the way that monitors display colors, so its handy for them. However, its not a good way to intuitively think about colors. There are other models for representing colors that are more like the way that people think about colors. This tool uses the HSB (or HSV) model, which stands for Hue, Saturation and Value (or brightness). In this model what we think of as "color" is the Hue, and it represents a position on the color wheel. If you break the color wheel into 360 degrees then you can think about hue as an angle. The saturation and value range from 0 to 1. Saturation represents how "intense" the color is, and Value is how bright a color is.

One of the very interesting opportunities that the HSB model provides is the ability to quickly develop an entire palette of colors that 'match' -- not specifically contrast or complement, but go well together. Here is a palette of colors that really look like they came off a swatch and would be a good to pick from to go on a web site.

There is a very simple and clever trick to get this group of colors. Remember the color wheel? Recall that its a 360 degree circle, and we observed that colors 180 degrees apart contrasted, and colors 120 degrees apart were complementary. Well, what if you picked colors that were, say, 36 degrees apart? There would be 10 of them, all with a different hue. Here's the trick: Keep the same saturation and value for each of the 10 colors, and presto! instant palette. Just by picking a set of colors that are separated by a fixed number of degrees you can instantly get a nice swatch of colors.

Of course, you could take this further and use different intervals of degrees, and get different effects. So, I've created a tool that acts not only as single color "picker", but also one that will let you get an entire palette at once, with a variable number of colors.

My apologies, this only works with IE. There is a lot of Javascript. If I can get some help to resolve the portability issues I'm happy to get it working on other browsers. Launch the Picker

© 2007 NiceCleanExample.com | Stumble |