How to Select a Base Hue on the Color Scheme Designer for HTML5 and CSS3 Programming

By Andy Harris

The Color Scheme Designer works by letting you pick one main hue for your HTML5 web page 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.

  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. You can also adjust the level of contrast to get very interesting effects.

  4. Preview the scheme.

    The Designer has several options for previewing your color scheme, including the ability to create quick web pages using the scheme. You might also look at the color blindness simulators to see how your page appears to people with different kinds of color blindness.

  5. Export the color settings.

    If you want, you can export the color settings to a number of formats, including a very nice HTML/CSS format. You can also save the colors to a special file for importing into GIMP or Photoshop, so the exact colors used in your page will be available to your image editor, too.