HEX vs RGB vs HSL: Which Color Format Should You Use?

Updated 2026-08-31 · 3 min read

The same color, three notations

#3B82F6, rgb(59 130 246) and hsl(217 91% 60%) all describe one blue. HEX and RGB describe how much red, green and blue light to mix; HSL describes hue, saturation and lightness the way a designer thinks.

When to use which

• HEX — compact, universal, ideal for design tokens and handoff
• RGB — best when values are computed in code or animated
• HSL — best for building palettes: shift lightness for hover and disabled states while the hue stays identical
• CMYK — print only; screens cannot display it accurately without a profile

Why HSL wins for design systems

With HSL you generate a whole scale from one hue by changing lightness, which keeps a theme coherent and makes dark mode a predictable transformation instead of a fresh set of hand-picked hex codes.

Alpha and contrast

All three formats support transparency (#3B82F680, rgb(59 130 246 / 50%), hsl(217 91% 60% / 50%)). Whatever notation you choose, verify text contrast is at least 4.5:1 for body copy — a color that passes in light mode often fails in dark mode.

Converting between the formats

HEX and RGB are the same numbers in different clothing: each pair of hex digits is one channel from 0 to 255, so #3B82F6 is 3B = 59, 82 = 130, F6 = 246. The conversion is exact in both directions.

HSL is a geometric transform of the same RGB cube: hue is the angle around a colour wheel from 0 to 360, saturation the distance from grey, and lightness the position between black and white. Round-tripping RGB to HSL and back can shift a value by one unit through rounding, which is harmless visually but means you should keep one format as the source of truth in your design tokens.

Building a palette with HSL

The reason design systems reach for HSL is that a whole scale falls out of a single hue. Fix the hue, vary lightness in even steps, and pull saturation down slightly at the extremes so the darkest and lightest steps do not look neon:

• 50 — hsl(217 91% 96%): page tints and subtle backgrounds
• 200 — hsl(217 91% 84%): borders and dividers
• 500 — hsl(217 91% 60%): the base brand colour
• 600 — hsl(217 91% 52%): hover state
• 700 — hsl(217 91% 44%): active or pressed state
• 900 — hsl(217 91% 24%): text on light tints

Contrast and accessibility

WCAG requires 4.5:1 contrast for body text and 3:1 for large text and meaningful UI elements. Lightness in HSL is not the same as perceived brightness — pure yellow at 50% lightness is far brighter to the eye than pure blue at 50% — so never assume equal L values give equal contrast.

Check the actual ratio for each text-on-background pair you ship, and check it again in dark mode, where a colour that passed on white frequently fails on near-black.

Modern CSS colour: OKLCH and wide gamut

OKLCH describes colour in perceptually uniform terms, so a change of 0.05 lightness looks like the same step regardless of hue — exactly what HSL fails to do. It also reaches colours outside sRGB on displays that support P3, giving noticeably richer accents on modern screens.

Browser support is now broad enough to use OKLCH as the authoring format with a hex fallback for older targets. If you are starting a design system today, defining tokens in OKLCH and exporting hex for handoff is the most future-proof arrangement.

Alpha, blending and the print question

All three notations support an alpha channel, but transparency composites against whatever is behind it, so a 50%-alpha grey over a photograph has no fixed contrast ratio at all. For text backgrounds, prefer an opaque colour computed to look like the blend.

CMYK belongs to print and cannot be converted accurately without knowing the paper and ink profile. Send print suppliers a proper colour profile or a Pantone reference; a CMYK approximation generated from a screen colour will not match the printed result.

Convert between formats instantly

The Color Converter shows HEX, RGB, HSL and CMYK side by side from a picker or a pasted value. Building a background? Try the CSS Gradient Generator.

Frequently asked questions