Website colours

The colours you choose for your website set the mood and present your brand and values consistently.

The science of colour

The colours that we can perceive are known as visible light, a section of the electromagnetic spectrum.

At either end of the spectrum of visible light are infrared and ultraviolet, which are not generally visible to humans. We are aware of the effects of ultraviolet when we get a suntan.

Color science is the scientific study of color including lighting and optics; measurement of light and color; the physiology, psychophysics, and modeling of color vision; and color reproduction. It is the modern extension of traditional color theory.

Wikipedia, Color science

In HTML, the colours are coded using a hexadecimal system, or with RGB codes. Both of these systems have the option for transparency as well as hue.

Tools for developers and designers

I was fascinated to see that ColorPicker (a tool for designers and developers) has a list of recently trending colours.

The great thing about using a tool like ColorPicker is that it shows which colours complement each other – both as shades of the same colour, and different types of complementary colours.

ColorPicker is also a browser extension, which I use for finding colours on the internet.

Colours and branding

Every colour on the spectrum has a symbolic meaning. The “hot” colours (red, orange, yellow, fuchsia, brown) are associated with passion, warmth, vibrancy, and comfort, but also impetuosity and even urgency. The “cool” colours (green, turquoise, blue, purple) are associated with nature, cleanliness, and spirituality, among other traits, but blue can sometimes be seen as cold. The “neutral” colours (grey, black, and white) are associated with sophistication and minimalism. Some colours are associated with specific industries, and others would seem weird if you used them in branding for that industry. It is a good idea to choose a range of colours for your website’s palette, with one colour as the dominant colour (probably the one that appears in your logo).

Shades and tints

For some contexts, you may want to use a lighter shade of your brand colour, so it is useful to have a range of shades and tints available. I have done this with my brand colours on this website.

Some companies choose muted and pastel shades for their colour scheme, suggesting a classic faded elegance; others like to use bright jewel colours, suggesting a contemporary feel.

Seasonal colours

In the 1980s, clothing colours were grouped into seasons, and people were advised to wear the colours associated with a specific season, depending on their skin and hair colour. The colour groups harmonize well together, and would be a great way to pick a website colour scheme.

Most design tools (e.g., Canva, ColorPicker) and website building tools offer a selection of colour palettes.

Another way to choose your branding colours is to create a mood board with a series of photographs that match the atmosphere you’re trying to convey, and then pick out the colours from the mood board. I would still use a tool like ColorPicker to ensure that the colours you have chosen complement each other.