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.