HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [73]
The HSV model is useful because it allows you to pick colors that go well together. Use the hue property to pick the basic colors. Because there’s a mathematical relationship between the various color values, it becomes easy to predict which colors work well together. After you have all the hues worked out, you can change the saturation and value to modify the overall tone of the page. Generally, all the colors in a particular scheme have similar saturation and values.
Unfortunately, you can’t specify CSS colors in HSV mode. Instead, you have to use another tool to get the colors you want and convert them to RGB format.
Using the Color Scheme Designer
Some people have great color sense. Others (like me) struggle a little bit because it all seems a little subjective. If you’re already confident with colors, you may not need this section — although, you still might find it interesting validation of what you already know. On the other hand, if you get perplexed in a paint store, you might find it helpful to know that some really useful tools are available.
One great way to get started is with a free tool: the Color Scheme Designer, shown in Figure 1-5. This tool created by Petr Stanicek uses a variation of the HSV model to help you pick color schemes. You can find this program at http://colorschemedesigner.com.
Figure 1-5: The Color Scheme Designer helps you pick colors.
The Color Scheme Designer has several areas, such as:
♦ The color wheel: This tool may bring back fond memories of your elementary school art class. The wheel arranges the colors in a way familiar to artists. You can click the color wheel to pick a primary color for your page.
♦ The color scheme selector: You can pick from a number of color schemes. I describe these schemes a little later in this section.
♦ A preview area: This area displays the selected colors in action so you can see how the various colors work together.
♦ Hex values: The hex values for the selected colors display on the page so you can copy them to your own application.
♦ Variations: You can look at variations of the selected scheme. These variations are often useful because they show differences in the saturation and value without you doing the math.
♦ Color-blindness simulation: This very handy tool lets you see your color scheme as it appears to people with various types of color-blindness.
This won’t make sense without experimentation. Be sure to play with this tool and see how easy it is to create colors that work well together.
Selecting a base hue
The Color Scheme Designer works by letting you pick one main hue and then uses one of a number of schemes for picking other hues that work well with the base one. To choose the base hue you want for your page, click a color on the color wheel.
The color wheel is arranged according to the traditional artist’s color scheme based on HSV rather than the RGB scheme used for computer graphics. When you select a color, the closest RGB representation is returned. This is nice because it allows you to apply traditional (HSV-style) color theory to the slightly different RGB model.
When you pick a color on the color wheel, you’re actually picking a hue. If you want any type of red, you can pick the red that appears on the wheel. You can then adjust the variations to modify the saturation and value of all the colors in the scheme together.
To pick a color using this scheme, follow these steps:
1. Pick a hue.
The colors on the color wheel represent hues in the HSV model. Find a primary color you want to use as the foundation of your page.
2. Determine a scheme.
The scheme indicates which other colors you will use and how they relate to the primary hue. More information on the various schemes is available in the next section.
3. Adjust your scheme.
The main schemes are picked using default settings for saturation and value. The Adjust Scheme tab allows you to modify the saturation and value settings to get much more control of your color scheme.