Hex colour codes, explained

A hex colour code looks arbitrary until you see where the digits come from. Once you do, #FF5733 stops being a magic string and becomes three numbers you can reason about.

What a hex code actually says

A hex code is three numbers stuck together: red, green and blue, each written in hexadecimal, each running from 00 to FF.

Hexadecimal is base 16, so it uses the digits 0–9 then A–F for the values 10–15. Two hex digits cover 0 to 255, which is exactly one byte per channel. So #FF5733 is red 255, green 87, blue 51 — a strong orange-red.

The useful landmarks:

• #000000 — all channels off, black.
• #FFFFFF — all channels full, white.
• #FF0000, #00FF00, #0000FF — pure red, green, blue.
• Any code where all three pairs are equal is a shade of grey. #808080 is mid-grey, #333333 a dark one.

That last rule is worth internalising, because it means you can read greys at a glance and spot an accidental colour cast in what should be neutral. The colour converter shows the same colour in every notation at once, which is the quickest way to build the intuition.

This is additive colour — light, not paint. Red and green light make yellow, which feels wrong until you remember that a screen emits rather than reflects. Mixing all three at full strength gives white; printing works the opposite way, which is why CMYK exists and why a colour that glows on screen can look muddy on paper.

Shorthand and alpha channels

Three-digit hex codes are shorthand where each digit is doubled: #F53 expands to #FF5533. It is compact, and it is also why so many quick mock-ups use #333 and #eee — they are fast to type.

Eight-digit codes add an alpha channel for transparency: #FF5733CC is that orange at roughly 80% opacity, because CC is 204 out of 255. Four-digit shorthand works the same way, so #F53C is the same thing.

One warning that catches people out: a semi-transparent colour is not a fixed colour. It composites against whatever sits behind it, so the same value looks different over white and over dark grey. If a design has to look identical in light and dark modes, use opaque colours.

Why HSL is easier to think in

RGB and hex describe how to make a colour. HSL describes what it looks like, which is far more useful when you are choosing rather than reproducing.

• Hue is the colour itself, as an angle from 0 to 360 around a wheel. Red 0, yellow 60, green 120, cyan 180, blue 240, magenta 300.
• Saturation is intensity, 0% grey to 100% vivid.
• Lightness is 0% black to 100% white, with 50% the pure hue.

The practical difference: to make an RGB colour darker you must reduce three numbers proportionally and hope you keep the hue. In HSL you lower one number. To find a complementary colour you add 180 to the hue. To build a set of tints you hold hue and saturation and vary lightness. Every palette operation becomes arithmetic on one axis.

One caveat worth knowing: HSL lightness is not perceptual. Pure yellow at 50% lightness looks far brighter than pure blue at 50%, because human vision is much more sensitive to green than to blue. Two colours with identical HSL lightness can have very different apparent brightness, which is why you cannot use it to judge contrast.

Building a palette that works

A few approaches that reliably produce something coherent:

• Monochromatic — one hue, varying saturation and lightness. Almost impossible to get wrong, and quietly what many restrained designs use.
• Analogous — hues within about 30 degrees of each other. Harmonious, low contrast, good for backgrounds.
• Complementary — hues 180 degrees apart. Maximum contrast, so use one as the dominant colour and the other only as an accent. Splitting them evenly is what makes a page look like a warning sign.
• Triadic — three hues 120 degrees apart. Vibrant and hard to balance.

The rule that matters more than any scheme: most of a design should be neutral. A common ratio is roughly 60% neutral, 30% secondary, 10% accent. Colour works by contrast with restraint, so a page where everything is coloured has no accent at all.

For gradients, keep the two stops close in hue. Blending across the wheel passes through the desaturated middle and produces a grey band — the CSS gradient generator makes this visible immediately, and adding a midpoint stop is the usual fix.

Contrast is the part people skip

A palette that looks good and cannot be read is a failed palette.

WCAG defines a contrast ratio between text and background running from 1:1 to 21:1. The thresholds worth remembering: 4.5:1 for normal body text at AA, 3:1 for large text or interface components, and 7:1 for AA. Light grey text on white — the default of a great many designs — routinely fails.

The ratio is computed from relative luminance, which weights green far more heavily than blue, so you cannot eyeball it and you certainly cannot infer it from HSL lightness. The colour converter includes a contrast checker for exactly this reason.

Also: never let colour be the only carrier of meaning. Around one in twelve men has some form of colour vision deficiency, most commonly red-green. A red-versus-green status indicator with no icon, label or shape difference is invisible to them.

Beyond hex: the newer colour spaces

Hex has a hard limit: it can only describe colours inside sRGB, the colour space designed around 1990s CRT monitors. Modern displays show considerably more than that, and those extra colours have no hex code at all.

CSS now supports wider notations — oklch(), lab(), display-p3. The interesting one is OKLCH, which is perceptually uniform: unlike HSL, equal changes in its lightness value look like equal changes to the eye. That makes generating a set of tints that all feel evenly spaced genuinely straightforward rather than a matter of hand-tuning.

None of this makes hex obsolete. It remains the most portable, most widely understood notation, and it is what you will paste into nine tools out of ten. But if a gradient looks subtly uneven or a generated palette feels lumpy, perceptual uniformity is usually the reason — and the colour converter will show you the same colour across notations so you can compare.

Pikkit has the rest of the web tools, and Web & Encoding collects them together.