Home · Blog · HEX, RGB and HSL

HEX, RGB and HSL: three ways to say the same colour

12 Oct 2026 · Colour · 7 min read

Sooner or later, everyone who touches a website meets a string like #2DD4BF and wonders what on earth it means. It looks like a serial number, but it's just an address — the address of one specific colour out of about 16.7 million. HEX, RGB and HSL are three different ways of writing down that same address, and each one is easier to read once you know what it's counting.

Think of them as three languages describing the same place. HEX is terse and compact, which is why it dominates stylesheets. RGB is explicit about the machinery — the actual red, green and blue light your screen mixes. HSL speaks in human terms: what hue is it, how vivid, how bright. None of them is "better" in any absolute sense; they just answer different questions. This article teaches you to read all three at a glance and to pick the right one for the job in front of you.

HEX: the six-digit shorthand

A HEX colour is six hexadecimal digits after a # sign: #RRGGBB. Each pair of digits is one channel — red, green, blue — written in base 16, where 00 means "none of this light" and FF means "all of it". So #FF0000 is full red with no green or blue: pure red. #000000 is no light at all: black. #FFFFFF is everything at full: white.

Hexadecimal counts 0–9 then A–F, so each digit carries 16 possible values and each pair carries 256. That's where the famous "16.7 million colours" comes from: 256 × 256 × 256. Once you internalise the pairs, you can read a HEX code the way you'd read a postcode. #2DD4BF? Red is low (2D is 45 out of 255), green is high (D4 is 212), blue is middling (BF is 191). Low red, lots of green, some blue — that's a teal. You won't get the exact shade in your head, but you'll land in the right neighbourhood, which is often enough when scanning a stylesheet.

Two conveniences are worth knowing. First, the three-digit shorthand: when each pair repeats, #FF8800 can be written #F80. Second, the eight-digit form adds an alpha (transparency) channel: #2DD4BF80 is that same teal at roughly 50% opacity (80 in hex is 128 out of 255). The shorthand only works for the six-digit form, and not every older tool understands eight digits — but every modern browser does.

RGB: the mixing-desk view

RGB says the same thing as HEX but in decimal, channel by channel: rgb(45, 212, 191). Each number runs from 0 to 255, which is exactly the 256 values each HEX pair encodes — #2DD4BF and rgb(45, 212, 191) are literally the same colour, digit for digit. HEX is just the more compact way of writing it.

The reason RGB exists as a separate notation is that it mirrors the hardware. Your screen really does have red, green and blue subpixels, and it really does mix them additively: red light plus green light makes yellow (rgb(255, 255, 0)), all three make white. When you're debugging why a colour looks wrong, RGB is the honest view — it shows you the actual light levels. It's also the notation that accepts an alpha channel most readably: rgba(45, 212, 191, 0.5) is immediately clear in a way that #2DD4BF80 isn't, because the 0.5 reads as "half" without any base-16 arithmetic.

You'll also see RGB written as percentages — rgb(18%, 83%, 75%) — which is the same three numbers divided by 255. Percentages are rare in practice but handy when you're thinking in proportions rather than absolute levels, for instance when describing "about three-quarters blue" to a colleague.

HSL: the human-friendly dial

HSL rearranges the same information around how people actually talk about colour. Instead of light levels it gives you three dials: hue (which colour, as an angle on a wheel from 0° to 360° — 0° is red, 120° is green, 240° is blue), saturation (how vivid, 0% is grey and 100% is the full-strength hue), and lightness (how bright, 0% is black and 100% is white, with the pure hue sitting at 50%).

This is the notation you want when you're adjusting a colour rather than just recording it. "Make it a bit darker" in HEX means subtracting mysterious amounts from three pairs of digits; in HSL it means lowering the lightness number. "Make it less garish" means lowering saturation. "Give me the same colour but bluer" means nudging the hue angle. Our teal friend is hsl(172, 66%, 50%) — a hue just past green toward blue, fairly saturated, at middle lightness. If you wanted a darker version for a hover state, you'd write hsl(172, 66%, 38%) and be done. Try doing that confidently in HEX.

HSL has one famous quirk worth knowing: lightness isn't perceptually uniform. hsl(60, 100%, 50%) (yellow) looks far brighter than hsl(240, 100%, 50%) (blue) even though both claim 50% lightness, because human eyes are much more sensitive to green-yellow light. So HSL is brilliant for adjustments but unreliable for comparing the apparent brightness of different hues — which is exactly the problem newer colour spaces like OKLCH were built to solve.

The same colours, three ways

Here's a small Rosetta stone. Each row is one colour written all three ways:

Notice how the HSL column tells you a story at a glance — the crimson's hue of 0° says "red family" instantly, the lavender's 85% lightness says "pale" — while the HEX column is compact but opaque until you decode the pairs. Different tools for different moments.

When to reach for each

• Writing stylesheets: HEX. It's the shortest, it's what every design tool copies to your clipboard, and it's what other developers expect to see.
• Debugging or scripting colour math: RGB. When code needs to manipulate channels directly — averaging two colours, reading pixel data from a canvas — the 0–255 numbers are what the APIs speak.
• Adjusting and exploring: HSL. Darker variant, muted variant, complementary colour — all of these are one-dial turns in HSL and arithmetic puzzles in the other two.
• Transparency: whichever your team reads fastest. rgba() with a 0–1 alpha is the clearest for most people; eight-digit HEX is the most compact.

The honest caveats

Three things these notations won't do for you. First, converting between them involves rounding — hsl(172, 66%, 50%) converts to rgb(45, 212, 191) only approximately, and round-tripping through several formats can drift a digit. For on-screen work the drift is invisible, but don't use converted values as canonical tokens in a design system; pick one source of truth.

Second, all three describe colours inside the sRGB gamut — the everyday range of screens. They can't express the vivid cyans and greens that newer wide-gamut displays can show. If you're working at that frontier, you need the newer notations (like OKLCH or Display-P3) rather than any of these three.

Third, and most practical: no notation fixes a bad colour choice. The notation is just the address format. Whether the colour itself works — against its background, for colour-blind users, at small sizes — is a design question, and that's what the contrast and palette tools are for.

Try the Colour Studio