HEX, RGB, HSL, and LCH: A Developer's Guide to CSS Colors

CSS gives you several ways to write the same color, and they are not interchangeable in your head. Each model is good at a different thing — HEX is compact, RGB is explicit, HSL is intuitive, and LCH is the one that finally matches how humans see.

Convert between all of them with the Color Converter.

HEX

color: #14b8a6;        /* #RRGGBB */
color: #14b8a6cc;      /* #RRGGBBAA — last two bytes are alpha */

HEX is compact and copy-pasteable, which is why design tools and brand guidelines use it. Each pair of hex digits is one byte: red, green, blue (and optionally alpha). The downside is that nothing about #14b8a6 tells you it is a teal — you have to render it to know.

RGB / RGBA

color: rgb(20 184 166);
color: rgb(20 184 166 / 60%);   /* 60% opaque */

RGB lists the red, green, and blue channels on a 0–255 scale (or 0%–100%). It is the model your screen actually uses, and modern CSS lets you add alpha with a slash. Like HEX, it describes a color exactly but says nothing intuitive about it — lightening a color means guessing new channel values.

HSL / HSLA

color: hsl(174 83% 40%);        /* hue, saturation, lightness */
color: hsl(174 83% 40% / 0.6);

HSL describes a color the way you think about it:

• Hue — the color wheel, 0°–360° (0 red, 120 green, 240 blue).
• Saturation — how intense, 0% (gray) to 100% (full color).
• Lightness — 0% black, 50% pure color, 100% white.

This makes HSL great for building palettes: keep hue and saturation, vary lightness to get shades and tints of the same color. The catch is that HSL lightness is not perceptually uniform — hsl(0 100% 50%) (pure red) and hsl(60 100% 50%) (pure yellow) have the same "lightness" number but very different perceived brightness, so an HSL palette can look uneven.

LCH (and OKLCH)

color: lch(50% 60 240);
color: oklch(0.6 0.15 240);

LCH stands for Lightness, Chroma, Hue, and it is built on a perceptually uniform color space. The big wins:

• Lightness actually means what it says — equal L values look equally bright, so palettes come out even.
• Wider gamut — LCH can express colors outside the old sRGB range (P3 displays show them).
• Predictable mixing — interpolating between two LCH colors stays smooth.

OKLCH is a popular variant that improves a few edge cases; both are supported in current browsers. If you have ever been frustrated that HSL's "50% lightness" looks different across hues, LCH/OKLCH is the fix.

Which to use?

• Design handoff, brand tokens → HEX.
• Direct, explicit values → RGB.
• Building tints/shades of one color → HSL.
• Even palettes, wide-gamut, modern browsers → LCH / OKLCH.

You will move between them constantly. The Color Converter translates any value to the others, and once a pair is chosen, the Color Contrast Checker tells you whether it passes WCAG.