Colour Schemes for Web Design

Photo by Annie Spratt on Unsplash

This article is geared towards front-end web developers at any level, who would like to learn the basics of colours and colour schemes for websites.

We will cover:

• colours (hue, saturation and lightness),
• demos with Sass colour functions
• colour schemes
• contrast between the text and background

Let’s dive right in.

THERE ARE TWO TYPES OF COLOURS:

1. Subtractive colour: the colour you can touch.
2. Additive colour: the colour you can not touch.

Subtractive colour is controlled by CMYK. CMYK stands for Cyan, Magenta, Yellow and Black. In theory, all of these colours mix to make black.

Additive colour is controlled using the RGB colour scheme. RGB as we know stands for Red, Green and Blue. In theory, all the colours mix to create white.

Traditionally in web design, we use the RGB colour scheme, however, humans don’t process colour in terms of the amount of Red, Green and Blue it has. We process colour in terms of hue, saturation and lightness (HSL).

HUE

Hue is best visualised on a colour wheel. Starting at 0deg at Red, as you move around the circle you get different colours, Green at 120deg, Blue at 240deg and Red again at 360deg.

The hues are created by varying degrees of the primary colours mixed to form the different hues.

SATURATION

Saturation is the difference between a colour and grey, that is the amount of grey added to a colour. A hue at 100% saturation is the most vibrant form of that colour, whereas a hue at 0% is grey.

LIGHTNESS

Lightness is the amount of light in a given colour. A hue at 100% lightness is white and at 0% lightness is black. A hue at 50% lightness is the purest form of that colour.

DEMOS

1. Hue

In the following demo, I have styled a div with background linear-gradient and set colour stops of hue 0deg, 30deg, 60deg, …, 360deg. I have set the saturation to 100% and the lightness to 50%. The result has the colours of the rainbow.

It is interesting to see the hue values of the named CSS colours. The following pen shows the hue values for colours traditionally cited for rainbow: red, orange, yellow, green, blue, indigo, and violet.

I used the following Sass code to get the hue values for these colours:

$rainbow-colors: red, orange, yellow, green, blue, indigo, violet, purple, pink;
  @each $color in $rainbow-colors {
    .color-#{$color} {
      color: $color;
        &:after {
          display: inline-block;
          content: "Hue: " + 
                   hue($color) + 
                   " Saturation: " 
                   + saturation($color) + 
                   " Lightness: " + 
                   lightness($color);
        }
     }
 }

2. Saturation and Lightness

The following pen shows how different the colour red (hue 0deg or 360deg) looks with different saturation and lightness values:

THE COLOUR SCHEME FOR A SITE

The Colour scheme for a site consists of four or five colours built into our style guide. First, we need to choose a base colour, a foundational colour from which the rest of the colour scheme will be made. When choosing a base colour, we have to keep in mind that different colours create different moods.

METHODS TO HELP YOU DECIDE ON THE COLOUR SCHEME

After choosing a base colour, we can use multiple methods to decide what the colour scheme would be. Some of the primary methods include:

• Monochromatic colour scheme — all the colours have the same hue and vary in saturation and lightness.
• Analogous colour scheme — varies in saturation and lightness but the hue both increases and decreases showing the colours adjacent to the base colour in the colour wheel.
• Complementary colour scheme — varies in saturation and lightness but has colours with the same hue as the base colour and colours of the opposite hue of the base colour.

To find the opposite colour, take the colour which is 180deg away from the colour in the colour wheel. The complement($color) function in Sass gives you the complement of a given colour.

COLOUR AND TYPE

Typography must have a high degree of contrast between the text and its background. Contrast is the difference in colour which could come from the difference in hue, saturation or lightness. It could be a small difference or a large difference. Black and white give the biggest contrast.

Hope you found this article useful.