How to Find Colors for Your Website's Color Scheme - dummies

How to Find Colors for Your Website’s Color Scheme

By David Karlins, Doug Sahlin

The most basic rule of color schemes for websites is that you have to work with a constrained, small number of colors. Otherwise, your site will simply present a messy cacophony of color. (Yes, a crazy-quilt approach is also a form of a color scheme, but as a general rule is not very effective.) How many colors can you have in your color scheme? Not too many, but just enough:

  • Web color schemes typically have five colors. Five is enough colors to cover a range of site content like background color, text color, link colors, and artwork.

  • Neutral colors — white, black, and gray, which are all shades — don’t count as one of your five colors. You can use those colors to make your color scheme pop more. For example, if you have a color scheme based on shades of orange, you could use black, white, and the grays for text and other content, letting the shades of orange really glow.

With that basic rule in mind, the next step to creating a web color scheme is to get inspired. Sometimes color schemes seem kind of obvious. The Minnesota Golden Gophers website? Maroon and gold. The National Breast Cancer Foundation site color scheme is built around shades of pink, invoking the color used to raise awareness of breast cancer.

So, in some cases at least some elements of a color scheme are almost self-evident. In other cases, that’s not the case. What would the natural color scheme be for a website dedicated to humor? Or fencing?

Here are some techniques for deriving color schemes:

  • Pull colors from artwork. If a product, organization, team, or band has a logo or basic artwork associated with it, the colors in that artwork can be the basis for a color scheme. Look for color guidelines from corporate branding documents or colors in logos.

  • Use an existing color scheme. This tact might seem obvious, but it might be the case that the group, school, company, or cause for which you’re designing a site for already has a color scheme. In which case, you can use that as a base from which to derive your web color scheme.

  • Get inspiration from one of the many sites that provide both technical and aesthetic advice on creating color schemes.