Michael Gaigg: Über UI/UX Design

21Sep4

16 Color Schemes for Your Website

Posted by Michael Gaigg

16 Color Schemes

16 Color Schemes

I love colors! I can't get enough of them actually. They inspire me, they give me good mood, they make me smile. So I started collecting them, first in real life - more about that later - and then online.

Now I want to share 16 color combination that are harmonic and that you can use for your next web project:

F78D13
73C8FE
FEA5F4
DF43A4
B9B9B9
CC2201
0C34BB
747474
5E82EE
FDE05E
DD4D28
D5DCE4
225577
EE7722
22AAAA
667711
1B325F
EEF8FE
F26C24
3C89C8
B49A73
587A27
2A7FD6
FFFFFF
FDBE21
FFFFFF
5E722E
3399FF
79AEC0
C84630
DFB34B
8B7956
8E7CBF
EACD89
C6C1C1
E2DFF8
C12D1E
6F9EC7
9E6744
F8DFA7
21708F
BD1700
0B394E
E19314
2299CC
888888
885599
FF9900
F2DFBE
A27F57
B6A666
9C5B47
185A00
FFCC00
E70808
08398C
E62D17
E8AC3C
B12211
DD8E00
A62B1B
7E8AAE
381211
425F9A
13Oct11

How to Create a Color Palette for your Website

Posted by Michael Gaigg

A palette is a complete set of colors one should adhere to when designing a website. This includes a color scheme (typically 2, 3 or 4 colors) plus some additional colors to work with. The goal along the design process is to stick to these colors without the need of inventing and introducing new ones.

Here are some tools and knowledge on how to design and create an effective and appealing color palette for you website in just minutes:

Know your primary color

Many times you will be constraint by your clients' need for a primary color, be it because of the logo, corporate identity (CI) or corporate design (CD) guidelines. Consider yourself lucky!
For the other times when you have to come up with a color for yourself, think of what best represents the company's target audience - young, fashion, pop, serious, technocratic, playful. All that will determine your ultimate choice. The best description I've found so far of what different colors actually stand for is in Jason Beaird's book 'The Principles of Beautiful Web Design'. Even though I'm 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 conveys power, think of tuxedos, limosines, Batman etc.

Create a Color Scheme

I've 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 useful for my purposes (feel free to convince me otherwise ;) )

Color Wheel

I highly recommend the WellStyled Color Scheme Generator 2 (http://www.wellstyled.com/tools/colorscheme2/index-en.html). It allows you to use your primary color and your knowledge about your target audience to play around and find the most suitable of the five classic color schemes:

  • monochromatic (your primary color in different tints or shades)
  • analogous (your primary color plus two colors next to it on the wheel)
  • complementary (=contrast; your primary color plus the opposite color on the wheel)
  • triadic (three colors equally separated on the wheel)
  • tetradic (basically two complementary schemes combined)

The Color Scheme Generator will calculate the correct RGB values in hexadecimal notation for you and even offer variations (pastel, contrast, pale) to further experiment. Once done, simply print or note the colors and values computed and you are ready to roll.

Ensure good Contrast

Contrast is not only a good design principle but also an Accessibility requirement for many websites (W3C, Section 508 in the US). So before you make your final choice on the color scheme ensure that your main color provides sufficient contrast to background/foreground colors.
Test your colors using Colour Contrast Check (http://www.snook.ca/technical/colour_contrast/colour.html) making sure the brightness difference is greater 124 and the color difference is not less than 500!

Finalize your Color Palette

To finalize your color palette all you need to determine is which other tints and shades of the existing (as determined above) 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 certainly a number of 5 or 6 seems to be about right (remember to count black and white).

Done, wasn't that easy?

Here are some interesting links I recommend together with an excellent book:

Suggested reading: