You already learned how to set colours with CSS. However, what colours should you use? Traditionally certain colours supposedly work well together and there are different approaches to decide which ones.
The colour wheel
You may be aware of primary colours. In light (as in the light coming from a monitor) they are red, green and blue. Those colours are used to set the colour of elements on a Web page using hexadecimal or decimal. When you mix those colours you get more colours. One way to show that is a colour wheel:
On a colour wheel the primary colours have been mixed to form new colours half way between each pair of primary colours. Then those secondary colours have been mixed to form more combinations. Mix two primary colours to get a secondary colour. Mix a primary colour with a secondary colour next to it to get a tertiary colour. There are three primary colours (red, green and blue), three secondary colours (cyan, magenta, yellow) and six tertiary colours. Each colour is a 30° slice of the circle
Although these colours can be (and normally are) expressed as mixtures of red, green and blue the correct way to measure the colours is to use hue, saturation and luminosity. Hue is a measure of how far around the wheel the colour is (e.g. 240° is blue as it is 240° around the wheel). Saturation is how much of that hue there is (e.g. 80%). Luminosity (or lightness) is how bright the hue is between 0% (black) and 100% (white). CSS3 will allow Web designers to set colours using this scheme but at the time of writing CSS3 is not fully supported by any browser. This is a shame as it would make the rest of this page very easy!
Complementary colours
One approach to getting colours which go well together is to use colours which are opposites. This means if they are both used they enhance each other and look more dramatic. You can find a complementary colour using the colour wheel. Pick a colour and then look opposite.
Red/cyan, yellow/blue and green/magenta are common examples. As you can see they are all opposites on the colour wheel.
If you could use HSL in CSS then it is easy to define the opposite colours (if the colours don't work your browser doesn't support CSS3):
- red (hsl(0,100%,50%)) complements cyan (hsl(180,100%,50%))
- orange (hsl(30,100%,50%)) complements this slightly greenish blue (hsl(210,100%,50%))
- this washed out violet (hsl(280,50%,50%)) complements a similarly washed out yellowish green (hsl(100,50%,50%))
To find the complement you just add (or take away) 180° but leave the saturation and luminosity the same. Without CSS3 you have to look up the complements in a graphics package or on one of many Web sites.
Split complementary colours
Complementary colours come in pairs. You could mix them with a neutral colour (white, grey or black) to get three but a common approach is to use the colours either side of the complementary colours. The original colour will still contrast nicely with the two split complements but they can be used together to produce more subtle effects. Looking at the colour wheel you just pick the two colours either side of the complement. The offset you use is optional but in the traditional colour wheel it would be 30° as that is the difference between each of the primary, secondary and tertiary colours in the wheel.
The complement for red was cyan and the split complements would be hsl(150,100%,50%) and hsl(210,100%,50%).
You would use the starting colour as a background and the three complementary colours for the content (maybe not with these example colours though unless you really do want impact! Try it.
Triad
Three triad colours will be equally spaced around the colour wheel (i.e. at 120° intervals).
Similar or analogous colours
Another approach is to forget the impact of opposite colours and go for similar ones. Pick any three colours next to each other on the colour wheel. Again the offset is up to you but 15° gives results such as these warm colours. As before if you don't see colours your browser needs updating. Choosing a larger offset would make the different colours less subtle but easier to see.
If this becomes too bland then use the complement of the middle colour to provide contrast. In effect this is a mix of the split complement and analogous approaches. You could also expand this by using the complements of each of the analogous colours but this may get too fussy so consider dropping the middle two colours (leaving four "tetrad" colours). For readability you would normally use one set of colours as foreground colours and one as background.
The easy ways
Rather than get bogged down in conversions it's easier to find a tool which will do it for you either on-line or within a graphics application. Colour scheme designer is just one possibility.
Often a Web page will be based around a dominant image. Tools such as this one exist to analyse the image and suggest suitable colours to use with it.
