Colour Selection

Colour selection is the first of the black holes of design. It is easy to spend too many hours finding the perfect combination.

Start with a photo with colours you like, and use CSSDrive Image Pallete to extract the colours.

Or start with a colour you like and use Serennu.com’s Colour Calculator to calculate related colours that, in theory, will look good. Coolors calculates fewer colours.

Remember to keep contrasts high. Dark text on light background for most of the text, light on dark sometimes. Do not count on people being able to tell the difference between two dark or two light shades.

Once you chose your main colours, use Colour Tool to see how they look as text and background. Often a colour looks different depending on how much there is of it, and what’s around it. To copy and email the page with your colours, right-click on Link, then Copy Link Address.

Finally, use Etre to simulate various types of colour blindness for both images and websites. 5% of the population is colour blind. 10% if your target audience is male, very small if your audience is female. It is easy to design sites that work for colour blind visitors, as long as you do it early on. Keep contrasts high, and use something in addition to colour to show important differences, such as font or underlining.


How do you describe a colour to a computer
(and to programmers)?

Websites describe colours in three colour spaces or languages. Each has pros and cons.

The most common is Hex. A hex number starts with a #, then has six digits, from 0 through F. Every colour program understands Hex, but it takes practice for a human, especially when looking for related colours.

RGB (aka red, green, blue) is the next most common. It’s three numbers between 0 and 100, or between 0 and 254, usually in brackets. Websites use numbers between 0 and 255. Programs for artists usually use numbers between 0 and 100.

HSL is my favourite. It’s three numbers. The first is between 0 and 360. It’s the position around the colour wheel. Red is 0. Lime green is 120.  Blue is 240. Saturation is a percentage, and describes how pure or greyish the colour is. Lightness is also a percentage, and describes how much white is in the colour.

To see a colour with different saturations and lightnesses, visit Serennu.com’s Colour Calculator. Enter “0000ff” beside the # sign. About half-way down it shows the same hue with different lightnesses, and the same hue with different saturations.

The light green border on this page is
Hex: #C9DBBD  (case does not matter)
HSL: 96° 29% 80%
RGB: 201 219 189

Colorizer describes colour spaces in more detail. If you wait long enough for it to load, it lets you see a colour described in those three languages and more, and lets you see the effects of changing each number.

Palleton is overkill, but it is the only site I have found that simulates several types of colour-blindness for palettes you choose.

How do you share colours with your friends?

ColorPeek lets you enter colours. You can then copy the URL, or click the Share symbol.

Web Safe Colours

All but the smallest of phones now show millions of colours, so it is no longer necessary to stick to the 256 web-safe colours.