Friday 4 November 2011

How to generate a Color Palette for your Website

A palette is a entire set of colors one should adhere to when designing a website. This includes a color scheme plus some extra colors to work with. The goal along the design process is to stick to these colors without the need of invent and introducing new ones. Here are some tools and knowledge on how to design and generate an effective and appealing color palette for you website in just minutes:

Recognize your primary color

Many times you will be constraint by your clients require for a primary color, be it because of the logo, corporate identity (CI) or corporate design (CD) guidelines. For the other times when you have to come up with a color for yourself, think of what best represent the company's aim audience young, fashion, pop, serious, technocratic, playful. All that will resolve your ultimate choice. The best description I have found so far of what special colors actually stand for is in Jason Beaird's book 'The Principles of Beautiful Web Design'. Even though I am sure you find tons of other sources on the web be aware of easy color-meaning mappings like black=death - in web design black is also a color that convey power, think of tuxedos, limosines, Batman etc.

Generate a Color Scheme

I have found the Red-Yellow-Blue color wheel the closest to traditional color theory and that's what I am using and writing about now. I acknowledge the CMYK (Cyan-Magenta-Yellow-Black) color wheel but found it less helpful for my purposes. I highly suggest the WellStyled Color Scheme Generator 2. It allows you to use your primary color and your knowledge about your target audience to play around and find the most right of the five classic color schemes:

    monochromatic (your primary color in special tints or shades)
    analogous (your primary color plus two colors next to it on the wheel)
    complementary (your primary color plus the reverse color on the wheel)
    triadic (three colors evenly separated on the wheel)
    tetradic (fundamentally two complementary schemes combined)

The Color Scheme maker will calculate the correct RGB values in hexadecimal notation for you and even offer variations to further experiment. Once done, simply print or note the colors and values compute and you are ready to roll.

Ensure good Contrast

Contrast is not only a good design principle but also an Accessibility necessity for many websites. So before you make your final choice on the color scheme make sure that your main color provides sufficient contrast to background/foreground colors. Test your colors using Colour Contrast Check making sure the brightness variation is greater 124 and the color difference is not less than 500.

Finalize your Color Palette

To finalize your color palette all you require to determine is which other tints and shades of the existing color scheme you want to use black and white included. As a basic rule try not to 'overload' your page with the amount of colors used, but surely a number of 5 or 6 seems to be about right.

Also visit : web design uae

No comments:

Post a Comment