HEX, RGB and HSL Colour Codes Explained
Updated October 2026
#ff8800, rgb(255, 136, 0) and hsl(32, 100%, 50%) are three ways of writing the same orange. Each notation has its own strength, and you can switch between them freely.
RGB: mixing light
A screen makes every colour by mixing red, green and blue light. An RGB code gives the amount of each as a number from 0 to 255. rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black because all light is off, and rgb(255, 255, 255) is white because all three are at full strength.
With 256 steps for each of the three colours, RGB can describe 256 x 256 x 256 = 16,777,216 different colours.
HEX: the same numbers, written shorter
A HEX code is an RGB code written in base 16. After the # come three pairs of characters: red, green and blue. Each pair runs from 00, which is 0, to ff, which is 255.
| HEX | Red | Green | Blue | Colour |
|---|---|---|---|---|
| #ff0000 | ff = 255 | 00 = 0 | 00 = 0 | Red |
| #00ff00 | 00 = 0 | ff = 255 | 00 = 0 | Green |
| #ff8800 | ff = 255 | 88 = 136 | 00 = 0 | Orange |
| #808080 | 80 = 128 | 80 = 128 | 80 = 128 | Grey |
When both characters of every pair are equal, the code can be shortened to three characters: #ff8800 becomes #f80. When all three pairs are the same, the colour is a shade of grey.
HSL: the way people think about colour
RGB is how a screen works, but it is hard to guess what rgb(51, 102, 153) looks like. HSL describes a colour with three ideas that match how we talk about it:
- Hue: the place on the colour wheel, from 0 to 360 degrees. 0 is red, 120 is green, 240 is blue.
- Saturation: how vivid the colour is, from 0% for grey to 100% for full colour.
- Lightness: from 0% for black, through 50% for the pure colour, to 100% for white.
This makes HSL handy for building a colour scheme. Keep the hue, change the lightness, and you get a lighter or darker version of the same colour. Shift the hue by 180 degrees and you get the opposite colour on the wheel.
Which one should you use?
- HEX is the most common in web design and the easiest to copy and share.
- RGB is useful when a program asks for three separate numbers, and when you need transparency.
- HSL is the easiest to adjust by hand and to create matching shades with.
All three work in CSS and describe exactly the same colours, so the choice is a matter of convenience.
Transparency
A fourth value, called alpha, sets how see-through a colour is. In CSS you write it as rgb(255 136 0 / 50%) or hsl(32 100% 50% / 50%). HEX can carry it as a fourth pair: #ff880080 is the same orange at about 50 percent.
What about CMYK?
CMYK is for print. A printer does not mix light but ink: cyan, magenta, yellow and black. Ink on paper cannot reproduce every colour a screen can show, and the result depends on the printer and the paper. A CMYK value calculated from a screen colour is therefore only a starting point. For exact print colours, ask your printer for their colour profile or use a colour system such as Pantone.