HEX, RGB and HSL: three ways of writing the same colour
Every screen colour is a mix of red, green and blue light. HEX and RGB write it one way, HSL another — and one of them is far easier to work with.
Screens make colour by mixing three lights: red, green and blue. Every colour you have ever seen on a display is a statement about how bright each of those three is. HEX, RGB and HSL are three notations for that same statement — and choosing the right one makes some jobs dramatically easier.
RGB and HEX are the same thing in different clothes
RGB gives each channel a number from 0 to 255 — 256 levels, because one byte holds exactly that many values. HEX writes those same three numbers in base 16, two digits each, glued together after a hash.
| Colour | HEX | RGB | Reading it |
|---|---|---|---|
| Pure red | #ff0000 | rgb(255, 0, 0) | red at maximum, others off |
| Black | #000000 | rgb(0, 0, 0) | all three off |
| White | #ffffff | rgb(255, 255, 255) | all three at maximum |
| Forest green | #478c5c | rgb(71, 140, 92) | 47₁₆=71, 8c₁₆=140, 5c₁₆=92 |
Hex is used because two hex digits cover exactly 0–255, so a full colour fits in six characters with no separators. `ff` is 255, `00` is 0, `8c` is 140. Once you know that `ff` means "as much as possible", most hex codes become readable at a glance.
The problem with RGB
Try this: take #478c5c and make it lighter, keeping the same colour. In RGB you must adjust all three channels, by different amounts, guessing as you go — and it is easy to shift the hue accidentally while you do it. RGB describes how a screen produces colour, not how people think about it.
HSL matches how people actually think
HSL splits colour into three things you can reason about independently:
- Hue — the colour itself, as an angle from 0 to 360° around a wheel. Red at 0, green near 120, blue near 240.
- Saturation — how vivid, from 0% (grey) to 100% (fully intense).
- Lightness — from 0% (black) through 50% (the pure colour) to 100% (white).
That same forest green is hsl(138, 33%, 41%). Want it lighter? Raise the lightness and change nothing else. Want a muted version? Lower the saturation. Want a colour scheme? Keep saturation and lightness fixed and rotate the hue — 138 plus 120 gives a harmonious partner, arrived at by arithmetic rather than trial and error.
| Task | In RGB | In HSL |
|---|---|---|
| Make it lighter | Adjust 3 numbers, risk shifting hue | Raise lightness |
| Make it duller | Move all 3 toward each other | Lower saturation |
| Find a matching colour | Guesswork | Rotate hue by a fixed amount |
| Build a light/dark theme | Two unrelated palettes | Same hue, different lightness |
Where each belongs
Use HEX for storing and sharing a fixed colour — it is compact, universal, and what design tools hand you. Use RGB when code needs the raw channels, particularly with transparency via rgba. Use HSL whenever you are *deriving* colours rather than picking them: hover states, disabled variants, dark-mode counterparts, entire palettes from one base.
Modern CSS accepts all three interchangeably, so this is purely about which makes the intent clearest. `hsl(138, 33%, 51%)` says "the same green, ten percent lighter". `#5aa870` says nothing at all about where it came from.
A note on contrast
None of these formats tell you whether text will be readable. Perceived brightness is not evenly distributed across channels — green contributes far more to how bright a colour looks than blue does, so two colours with the same HSL lightness can differ noticeably in practice. For accessibility, check the actual contrast ratio rather than trusting the lightness number.
Color Converter Convert between HEX, RGB and HSL Number Base Converter See how hex maps to decimal Aspect Ratio Calculator Work out image and screen ratios