RGB and HSL: two ways to describe colour
RGB and HSL: two ways to describe colour
Screens create colour using red, green and blue light. RGB describes how much of each to combine, with values from 0 to 255. All three at zero produce black; all three at their maximum produce white. Different combinations create the colours in between.
The HEX codes shown in this tool, such as #005588 are another way of writing those RGB values.
Each hex code comprises three pairs of hexadecimal code representing each colour:
# demotes a hex code in the coding of the site equating to 0-254 values in decimal
Then the first pair of digits = 0-254 in hexadecimal for Red;
The middle pair = 0-254 in hex for Green
The end pair = 0-254 in hex for Blue
#000000 = black
#FFFFFF = white
So #FF0000 = Pure Red; #00FF00 = Pure Green; #0000FF = Pure Blue
One of the greens used on the branding for this site = #2D5C5D
You can copy hex codes into your website’s colour settings to use the colour you’ve chosen - see the colour chooser tool to find and copy colours you like for your own site
HSL describes the same range of colours through three qualities that can be easier to work with:
- Hue is the colour’s position around the wheel — red, orange, green, blue and everything between.
- Saturation is how vivid or muted it is. Lower saturation moves towards grey; higher saturation makes the hue stronger.
- Lightness is how light or dark it is. At one end is black, at the other is white, with coloured shades in between.
Why use both in web design?
RGB and HEX are useful for specifying and sharing an exact colour, for example, to apply your brand colour consistently to headings, buttons and other elements.
HSL makes it easier to adjust colours deliberately. You can keep the same hue while creating a darker shade for headings, a more muted version for supporting elements or a pale tint for backgrounds.
In this colour chooser tool, moving around the wheel changes Hue, while moving inward or outward changes Saturation. Each palette colour also has a Lightness setting suited to its suggested role, from Deep to Canvas.
Both formats work on the web. The choice is about what you’re doing: RGB or HEX to specify a colour; HSL to explore and adjust it. Neither guarantees readable text, so check the contrast of colours you use together.