HEX vs RGB vs HSL: choosing the right color notation
All three notations describe colors in the sRGB space used by the web. They are interchangeable in meaning, but each makes different tasks easier: copying values, mixing channels, or adjusting lightness.
What each format encodes
HEX packs the red, green, and blue channels into a compact
#rrggbb string—two hexadecimal digits per channel. RGB spells
them out as decimal numbers from 0 to 255, optionally with alpha. HSL
describes color as hue (0–360°), saturation (%), and lightness (%),
which maps more closely to how people talk about color.
A three-digit HEX shorthand like #f80 expands to
#ff8800. Modern CSS also accepts four-digit shorthand for
colors with transparency.
Side-by-side
The same orange, three ways.
| Notation | Example | Strengths | Best fit |
|---|---|---|---|
| HEX | #ff8c00 | Compact, ubiquitous in design tools | Copying exact brand values, design tokens |
| RGB | rgb(255, 140, 0) | Channel arithmetic is explicit; easy alpha | Image processing logic, dynamic alpha in CSS |
| HSL | hsl(33, 100%, 50%) | Human-readable adjustments of tone and lightness | Building palettes, hover states, theme variations |
Practical tips for working with color
Think in HSL
Keep hue fixed and vary lightness to build tints and shades that stay harmonious—something channel-wise RGB tweaks rarely achieve.
Check luminance
WCAG contrast ratios derive from relative luminance. This tool shows it so you can spot text/background pairs that fail accessibility thresholds.
Pick one house style
Mixed notations make diffs noisy and tokens inconsistent. Choose a single format for your codebase and convert deliberately.