HSL and colour schemes

The Internet mostly uses “RGB” (Red Green Blue) encoding to describe colours displayed on user screens. Adjusting each of R,G and B can create a huge number of possible colours, but the route to getting a particular colour you’d like is not intuitive.

Instead, a colour coding scheme called “HSL” (Hue, Saturation, Lightness) offers an alternative which is more representative of how people experience colour and therefore more intuitive to use. Also, using this method, it is possible to suggest colour combinations that are generally experienced as “pleasing”, for use as a colour scheme on websites etc...

The choice of colours using HSL does however need to be converted into the RGB representation for inclusion in a website design. This programme is meant to facilitate this.

HSL – Hue Saturation Lightness

Hue (H) – the actual ‘colour’ we see (red, blue, … in all their various shades), often represented as the circumference of a wheel, with RED at the top (0°), going clockwise via GREEN and BLUE (at 120° and 240° respectively) back to RED again (360° = 0°), with all combinations of these three colours in between.

Saturation (S) – how ‘colourful’ these colours are. From 0% (plain grey) at the centre of the wheel to very brightly coloured at the circumference (100%).

Lightness (L) – how bright or dark the colour is. At L = 50% we get full-on effect of the ‘pure’ colour. As L moves towards 100%, it’s like adding white paint, making the colours appear more pastel shades, until at 100% they are pure white. Going the other way, from 50% down towards zero, is like adding black paint, the colours getting richer and darker until they become full black at 0%.

Colour Schemes

Inverse: This is not a standardised term, but one used only in this programme. It refers to the numerical inverse of the R,G and B values of the colour (i.e. 255 minus the value chosen). At L = 50% this looks the same as the Complement, but if L increases, the colour gets lighter but the inverse gets darker. This provides a fast way of making colours that contrast well against each other.

Complement: This is the colour, with same saturation and lightness, but directly opposite the chosen one on the colour wheel (180° separation).

Monochrome: The second colour has the same hue and saturation as the selected colour, but the lightness can be changed to create contrast.

Analogous: These are three colour schemes, with two colours close to the one chosen, with same S and L but slightly different H (separated by the same angle either side). Presets with different angles are offered.

Triadic: A colour scheme that uses three colours – the selected one and two others that are separated by the same H angle either side. This is a good choice for most colour schemes

Tetradic: A colour scheme with 4 colours, usually the main colour and its complement, plus two other colours separated symmetrically in H. A preset is offered, with the two extra colours at 90°.

Luminance and text contrast

The apparent 'brightness' of a background colour is determined by the mix of R,G and B it contains, but the eye is not equally sensitive to these three colours - green appears brightest, for example. Various ways to calculate an apparent luminance exist, depending upon the application and the colour space used.

This program uses a formula derived from the colour space used in TV broadcasting to determine the apparent brightness of a background colour, and from this to select the most appropriate colour for the text, so that it is optimally readable. This formula is:

RGB Luminance value = 0.3 x R + 0.59 x G + 0.11 x B

As the maximum value of this number is 255 (0.3 + 0.59 + 0.11 is 1), values of 128 or more indicate to use black text, while lower values indicate to use white text.