How to Use the Color Scheme Designer for Your HTML5 and CSS3 Based Web Pages - dummies

How to Use the Color Scheme Designer for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

Some people have great color sense when designing their HTML5 and CSS3 web pages. Others struggle a little bit because it all seems a little subjective. 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. This tool, created by Petr Stanicek, uses a variation of the HSV model to help you pick color schemes.


The Color Scheme Designer has several features, 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.

  • 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.