How to Create a Color Palette for Your Website

    written by Anna Bailey

    A color palette is the set of colors used in the design and creation of the website. These colors should be chosen carefully because they will not only determine the overall look of your site, but they will help define your brand as well.
    Most color palettes consist of between two and four colors, not including basic colors such as black and white. If you already have a logo or corporate design, then you may already have a good idea of the colors you wish to include in your website.

    Choosing Your Primary Color

    First, choose a primary color. If you already have a logo, choose the main color of that logo. If not, then you will be choosing one from scratch. Take a moment to consider the target audience of your site. Are they young, fashionable, pop-oriented? Perhaps a bright color such as red or purple would be a good choice. If your site is oriented towards corporate clients, then blue is a solid option. Children and families? How about a bright yellow?

    A good resource to use when choosing a color is Jason Beaird’s book The Principles of Beautiful Web Design.

    Creating a Color Scheme

    Websites built using HTML and CSS use a relatively limited set of colors that are known as browser-safe colors, meaning they render the same across all browsers. These colors are defined by CMYK numbers (Cyan-Magenta-Yellow-Black) and look like: #4671D5 (Light Blue). Most web-design tools will have a color palette tool that will show you both the color and number.

    Traditional designers often use a color-wheel – a tool designed to help you select color schemes visually. The most common color schemes are:

    • monochromatic – a color scheme based on shades of the primary color
    • complementary – a contrasting scheme that uses your primary color plus the opposite color on the wheel
    • analogous – your primary color plus two colors next to it
    • tetradic – two complementary color schemes combined
    • triadic – three colors equally separated on the wheel

    Let’s take a look at examples of the most common color schemes.

    Monochromatic

    Here are examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

    Monochromatic Color Scheme

    Monochromatic Color Scheme

    Monochromatic Color Scheme

    Complementary

    Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades.

    Complementary Color Scheme

    Complementary Color Scheme

    Complementary Color Scheme

    Analogous

    Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs for designing websites.

    Analogous Color Scheme

    Analogous Color Scheme

    Tetradic

    Tetradic color schemes are probably the most difficult schemes to pull off effectively.

    Tetradic Color Scheme

    Tetradic Color Scheme

    Triadic

    Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

    Triadic Color Scheme

    Triadic Color Scheme

    The best combination of both tools is an online tool like the Color Scheme Designer. You can graphically choose your colors, select what type of scheme you want, and it will give you the CMYK colors to input into your web-design tool.

    How to Create a Color Palette for Your Website - Color Wheel

    Using Good Contrast

    It’s important to choose background and foreground colors that will provide good contrast between words, images, and backgrounds. For instance, black text on a white background, or white text on a black background make websites easy to read. Orange text on a brown background does not have enough contrast, and will frustrate your readers by making your site hard to read.

    How to Create a Color Palette for Your Website - Using Good Contrast

    Finalizing Your Color Palette

    Once you’ve chosen your color scheme, ensured good contrast between text and background, all that remains to do is to choose any additional tints (lighter or darker shades) of your main colors. These can be used for hovering menu buttons, link text, or shadowing.

    Don’t overload your site with too many colors, as it will create a loud, clashing experience for your visitors. An About.com poll of two hundred web designers indicated that most prefer between 4 and six colors per site.

    A good step once you’ve got your color palette picked out is to mock-up your site layout and get your team or a friend to look it over. Ask them what impression your site gives. If it’s the right impression, then you’ve done a good job! If not, then go back and tweak your color scheme some more.

    A resource I’ve found helpful when working on new websites is Open Source Web Design, a site with lots of free templates and inspiration. Good designing!

    Authored by

    Anna Bailey is a social media advocate at the credit card website, CreditDonkey. She's also an avid fan of color and style.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

5 Comments
ADD COMMENT
  • Good Web Design says:

    May 24, 2011

    Nice post. There should actually be most written about website color schemes now I think about it.

  • Julio Rivera says:

    May 24, 2011

    Really nice post! I have learn about web colors here. Cheers!!

  • Catherine Azzarello says:

    May 25, 2011

    Sorry, but I’ve got to point out some errors in the article:

    • Re: “Websites built using HTML and CSS use a relatively limited set of colors that are known as browser-safe colors, meaning they render the same across all browsers.”

    1) all websites are built with HTML & CSS, some also incorporate Flash.
    2) ‘browser-safe’ or ‘web-safe’ no longer applies (and hasn’t for years). You can use any of the 16M+ colors available

    • Re: “These colors are defined by CMYK numbers (Cyan-Magenta-Yellow-Black) and look like: #4671D5 (Light Blue). Most web-design tools will have a color palette tool that will show you both the color and number.”

    1) CMYK is ONLY applicable to print–cyan, magenta, yellow and black percents of INK on printing press.
    2) RGB is ONLY applicable to web–RED, GREEN, BLUE–as represented by LIGHT from monitor.
    3) #4671D5 is a HEXIDECIMAL notation of blue.
    4) rgb(70,113,213) is an RGB notation of same blue.
    5) hsl(221,67,83) is a HSL (HUE, SATURATION, LIGHTNESS) notation of same blue.
    6) rgba(70,113,213,.5), hsla(221,67,83,.5) both represent the blue at 50% transparency (alpha value).
    7) Any of the above notations–except CMYK–will work when coding a website.

  • Anna says:

    May 26, 2011

    Thanks for pointing out the errors!

    You’re right, I should have said RGB instead of CMYK as the color is a hexidecimal representation of a RGB color (46 for Red, 71 for G, D5 for B).

  • Web Design Company Mumbai says:

    June 3, 2011

    Nice post.