Before you can consider the finer points of your design, you need to make the big decisions. Few of these decisions are more important than what colour scheme your website is going to use. If you choose the wrong one, your site will be, in the worst cases, completely unreadable.
Pay Attention to Contrast.
First of all, before you do anything else, you need to check that the colours you’ve chosen provide enough contrast for your text to be readable. Don’t put orange text on a yellow background, or red on blue, or anything like that. You should especially avoid using a lighter version of a colour on top of a darker version of that same colour, or vice versa. You’ve got to make sure that your text is readable.
Never Use Black Backgrounds.
You can generally use whatever colours you like as part of your colour scheme, but stay away from black backgrounds. It makes your website look ‘underground’ and threatening, not to mention old-fashioned. The only people who will like it will be dyed-in-the-wool computer nerds and people who get headaches from large areas of white.
Not Too Many Colours.
You should choose three or four colours for your site, and use only those colours (or shades of those colours). You can’t go using the whole rainbow without the design looking garish, and garish is never good. Decide ahead of time which three or four colours you’re going to use, and stick to it – if you want to add one, you have to drop one of the ones you’ve already got.
Complementary Colours.
These are colours that are opposite each other on a colour wheel, and so look good together, at least according to colour theory. The three most common sets are red-green; blue-orange, and yellow-purple. Whether you agree with this or not is up to you, but it can work surprisingly well, especially if you use subtle shades of the colours.
This is also a good way to pick colours that will be easily readable against a certain background: look for the exact opposite colour to maximise readability.
Analog Colours.
Another approach to try is to pick colours that are similar to your main colour, meaning that they’re near to it on the colour wheel. Red, for example, goes well with its analog colours, orange and yellow. Overdone, this can make your site look overly bright, but it can look good with restraint. It’s no coincidence that these combinations often occur in nature.
Chromatic Colours.
My personal favourite technique is to use colours chromatically. You use different shades and hues of one colour in your design, and nothing else apart from black and white – for example, you might use light blue, bright blue and dark blue together. This creates a sleek, professional look, and comes highly recommended.
Take Colours from Nature.
If you’re lacking inspiration for a colour scheme, one of the best things you can do is go for a walk outside. Take a look around at plants, flowers and animals. I once based an entire design on a photograph I took of a cat, and it turned out far better than I would ever have expected. Nature knows how to use colours better than you do – learn from it.
Colour Blindness.
Finally, it’s worth dropping in a note here about colour blindness. Try to make sure that your design uses colour to make itself aesthetically pleasing, but doesn’t rely on it for anything essential. You wouldn’t believe the statistics for the prevalence of colour blindness (some say as high as 10% are at least partially colour blind), and you need to consider these people too when you’re designing your site – they’re at least as important as the people with unusual browsers, for example.
You might like to take a look at your site using www.vischeck.com, which will let you see things the way a colour blind user would. Make sure they can at least still read your text!