A colour on screen is three or four numbers. What changes between formats is how those numbers are arranged, and that arrangement decides how easy the colour is to reason about. Converting between them is mechanical; knowing which one to reach for is the useful part.
The formats
Hex — #3d8bf5. Three pairs of hexadecimal digits for red, green and blue, each from
00 to ff (0–255). Compact, universally supported, and the default in most design tools.
Its weakness is that it is unreadable: nothing about #3d8bf5 tells you it is a mid-bright
blue, and nothing tells you how to make it slightly darker.
RGB — rgb(61 139 245). The same three channels in decimal. Marginally more legible than
hex and the natural format when you are manipulating channels programmatically. rgba(), or
the modern rgb(61 139 245 / 50%), adds alpha.
HSL — hsl(216 90% 60%). Hue as an angle around a colour wheel, saturation and lightness
as percentages. This is the first format you can actually think in: to get a darker version
of a colour, drop the lightness. To get a muted version, drop the saturation. To find a
complement, add 180 to the hue. That reasoning is impossible in hex.
OKLCH — oklch(0.62 0.19 258). Lightness, chroma and hue in a perceptually uniform space.
The important property: equal numeric steps look like equal visual steps, which is not true of
HSL. Now supported across all major browsers, and the right choice for generating scales and
palettes.
Why HSL lies about lightness
HSL’s lightness is a mathematical midpoint, not a perceptual one. hsl(60 100% 50%) is
yellow and hsl(240 100% 50%) is blue — both claim 50% lightness, and the yellow is
dramatically brighter to the eye. Build a set of “equally light” brand colours in HSL and they
will look nothing of the sort.
OKLCH fixes this. At the same L value, colours genuinely appear equally light regardless of hue, which is why it is worth the unfamiliarity when you are producing a colour scale or checking a palette holds together.
Worked conversions
#3d8bf5 to RGB. Split into pairs: 3d = 61, 8b = 139, f5 = 245. So
rgb(61 139 245).
RGB to HSL. Divide each channel by 255, find the largest and smallest, and derive
lightness from their midpoint, saturation from their spread, and hue from which channel is
dominant. The result here is hsl(216 90% 60%) — a blue at high saturation, slightly lighter
than mid.
Shorthand hex. #fff expands to #ffffff by doubling each digit. It only works when all
three pairs are doubled digits, so #3d8bf5 has no shorthand.
Alpha. #3d8bf580 is the same blue at 50% opacity — the fourth pair is alpha, where 80
is 128 of 255. Eight-digit hex is well supported but easy to misread; rgb(... / 50%) is
clearer in a codebase.
Where people go wrong
Assuming hex is more precise. All three of hex, RGB and HSL describe the same 24-bit sRGB space. Converting between them loses nothing except through rounding — HSL values are often stored to fewer decimal places, so a hex → HSL → hex round trip can land one value off. Keep one canonical format and derive the rest.
Treating a colour as absolute. The same hex renders differently on different displays, depending on calibration and colour profile. It is a specification, not a guarantee.
Ignoring the colour space. #3d8bf5 in sRGB is not the same colour as those coordinates
in Display P3. If you are working with wide-gamut CSS, the space matters as much as the
values.
Using HSL to build accessible pairs. Because its lightness is not perceptual, two colours with a large HSL lightness gap can still fail contrast. Check the real ratio with the contrast checker rather than trusting the numbers.
Our guide on hex, RGB, HSL and OKLCH explained goes further into the maths, and choosing colours that work together covers what to do once you can move between them fluently.