The three formats and what each is good at
Hex writes each of the red, green, and blue channels as two hexadecimal digits: #2563EB is red 0x25 (37), green 0x63 (99), blue 0xEB (235). It is compact and the default in most design tools.
RGB writes the same three values in decimal: rgb(37, 99, 235). Identical information, easier to compute with, and it extends naturally to rgba() for transparency.
HSL is a different model entirely — hue as an angle on the colour wheel, saturation and lightness as percentages. It is far more intuitive to adjust: to make a colour lighter you change one number rather than juggling three.
All three describe the same sRGB colour space. Converting between them is lossless.
Why HSL is worth using for design systems
If you want a palette where one colour is a lighter version of another, hex and RGB make that awkward. In HSL you keep the hue and saturation and change only the lightness.
Take hsl(220, 83%, 53%). Setting lightness to 90% gives a tint, and to 25% gives a shade — both unmistakably the same colour family. Doing the same in hex requires guesswork or a tool.
This is why most modern design systems define colours in HSL or a perceptual space and generate the scale programmatically. CSS custom properties make it practical: define hue and saturation once, vary lightness per step.
Hex shorthand and the alpha channel
Three-digit hex is shorthand where each digit is doubled: #F00 expands to #FF0000. It only works when both digits of each channel match, so it covers a small subset of colours.
Modern browsers also accept 8-digit hex, where the final pair is alpha: #2563EB80 is the same blue at 50% opacity. The 4-digit form is the shorthand equivalent.
One practical caution: a semi-transparent colour composites against whatever is behind it, so the rendered result depends on the background. For text this matters — contrast ratios must be calculated against the actual composited colour, not the declared one.
Newer CSS colour spaces
Hex, RGB, and HSL are all confined to sRGB, which covers a smaller range than modern displays can produce. CSS now supports wider spaces.
oklch() is the most useful addition for interface work. It is perceptually uniform, meaning equal numeric changes in lightness look like equal changes to the eye — which is not true of HSL. In HSL, a yellow and a blue at the same lightness value look very different in brightness; in OKLCH they match.
For design systems this solves a real problem: generating a palette where every colour at step 500 has genuinely equal visual weight. Support is now broad, and @supports allows a straightforward sRGB fallback.
Practical notes
Case does not matter in hex, and the leading # is required in CSS but often omitted in design tools.
Named colours exist for 148 values, but only a handful are memorable and several are surprising — gray and grey are both valid and identical, while darkgray is lighter than gray.
Colour on screen is not colour in print. RGB is additive light; CMYK is subtractive ink. Vivid RGB colours frequently cannot be reproduced in print, which is why brand guidelines specify both separately rather than converting.
Frequently asked questions
How do I convert hex to RGB manually?
Split the hex into three pairs and convert each from base 16 to base 10. For #2563EB: 25 is 37, 63 is 99, and EB is 235, giving rgb(37, 99, 235).
What does the 8-digit hex format mean?
The final two digits are the alpha channel. #2563EB80 is the same colour at roughly 50% opacity. The 4-digit form is its shorthand equivalent.
Why use HSL instead of hex?
Because it makes colours easy to adjust. Keeping hue and saturation fixed and changing only lightness produces tints and shades of the same colour, which is awkward to do in hex.
What is OKLCH and should I use it?
A perceptually uniform colour space now supported in CSS. Equal numeric lightness changes look equal to the eye, which HSL does not achieve. It is particularly useful for generating balanced design system palettes.