Using Colors Effectively for Web Design

Color Wheel

Properly coded and HTML is essential in the creation of website structure and content. However, it is also important to  consider the display of the website (coded within the CSS, of course!), so that users want and are willing to interact with the site.

The colors you choose to use on your website are important. If they clash or are discordant, they will, simply put, make viewers’ eyes hurt.

This how-to will guide you through some color combinations that could work well on your website.

Please remember that while these colors may work well together, typing one bright color on top of another equally bright background will make it very difficult for viewers to read your text.

Complementary Colors

Complementary colors exist on opposite sides of the color wheel. They can work well together, but you may find that lightening or darkening one or both of the complementary colors makes the combination more interesting. This may be particularly effective with the colors red and green, which people associate with Christmas.

Triads and Two-Thirds Colors

Triads are colors that exist in thirds apart from each other on the color wheel, like the primary colors red, yellow, and blue. Using triads other than primary or secondary colors (orange, green, and purple) may seem less “elementary school” in nature. These tertiary triads can also be split into pleasing combinations, by choosing two out of the three colors in a triad.

Split Complementary Colors

Split complementary color combinations are created by choosing a color and the two colors which neighbor its complement. These combinations provide more colors to work into your design.

To obtain more colors, you could also choose two sets of complementary colors.

Labeled Color Wheel

For more subtle color combinations, you can also consider analogous colors, which appear next to or near each other on the color wheel, or monochromatic colors, which are hues of various tints, tones, and shades.

Also consider your usage of neutral colors (black, gray, white, browns) for graphics and text as well as background colors.

Katie and her terribly malfunctioning computer

Labeled color wheel borrowed from Creative Curio.


~ by katiedigicomp on February 7, 2011.

%d bloggers like this: