The Three Colours philosophy is very simple. It’s basically a heuristic that I’ve developed to deal with a common design problem: how do you balance ease of use and informational richness with aesthetics in a website design?

Simplicity means having fewer visual elements for users to deal with. It translates, in this context, to fewer colours. Informational richness, on the other hand, could be reframed as differentiation. Links need to be differentiated from normal text; likewise for headers.

Making links a different colour to the surrounding text is an effective technique, and changing their hover colour helps the user differentiate between links in general and the specific one they’re mousing over. For example, this site’s links are blue, and go a mustardy yellow on hover.

Now, I could simply have made headers like h3s a lighter, greyish blue—maybe #b8d6e5—which would have differentiated them well enough. However, that would have left the site looking cold and flat, so I opted to bring in a third colour: orange. This warms up the page, gives it an added visual dimension, and sets elements like headers and the current section apart from links and the main content.

Note: the preceding two paragraphs refer to an older version of this site, the basic design of which is now available as the ‘Classic’ style for Tarski.

Using three colours balances function and form, and is a nice rule of thumb: it makes things quicker and easier to design. As long as you remember it’s not set in stone, it can be a useful trick. Of course, choosing the right three colours is another thing entirely… but you can’t expect me to give up all my secrets!