One color, three notations: HEX, RGB and HSL compared
· 5 min read
HEX vs RGB vs HSL explained with one real color in three notations and a measured five-shade HSL ramp, plus guidance on which format fits each editing task.
- All three notations describe identical colors; they differ in what each makes easy
- One real color, #3B82F6, reads as rgb(59, 130, 246) or hsl(217, 91%, 60%)
- HSL turns palette building into arithmetic on hue, saturation, and lightness
- Modern CSS accepts all three plus newer spaces like oklch from CSS Color 4
Same color, three names
Hex, RGB, and HSL are not competing formats so much as three coordinate systems over the same space, and the CSS Color Module Level 4 specification parses all three into the same color type; MDN's color reference treats them as interchangeable spellings rather than different features. During research for this guide we converted one familiar color through all three, with results computed directly rather than rounded from memory:
| Notation | Value | What it emphasizes |
|---|---|---|
| Hex | #3B82F6 | Packed bytes; copy-paste from design tools |
| RGB | rgb(59, 130, 246) | Raw channel amounts machines emit |
| HSL | hsl(217, 91%, 60%) | Human-readable hue, saturation, lightness |
Every renderer produces the identical pixel from any row. The choice among them is about workflow: which representation matches the change you want to make.
HEX: compact and universal
A hex value packs three channel bytes into six hexadecimal digits, two per channel, prefixed by a hash. The MDN color value reference documents the shorthand form, where repeated digits collapse, and the specification's hex section formalizes both lengths: #3388ff shortens to #38f because each digit doubles. Hex dominates design handoff for good reason: it is short, unambiguous, case-insensitive, and every tool on earth parses it. An eight-digit form, #RRGGBBAA, extends hex with an alpha channel, though day-to-day translucency still flows through rgb() and hsl() more readably.
Its weakness is meaning. Reading #3B82F6, nobody intuits that it leans blue-violet at high saturation until converting mentally to HSL. Hex answers where the bytes are, not what the color feels like, which matters when the task is adjusting feel.
RGB: channels and alpha
rgb() names exactly what hex encodes: decimal amounts of red, green, and blue light, each 0 to 255, with an optional alpha component written rgb(59 130 246 / 0.5) in the modern slash syntax. Screens mix light additively, so RGB mirrors the hardware directly; screenshots, canvas APIs, and image editors speak this dialect natively. When a designer hands you channel numbers from eyedropper output, rgb() preserves them without mental hex conversion, and alpha handling reads more naturally than appending byte pairs to hex.
HSL: colors humans can edit
HSL reorganizes the same data around hue, saturation, and lightness: a hue angle in degrees, saturation as a percentage, lightness as a percentage. The MDN hsl reference walks the cylinder model behind those coordinates. Its practical superpower is decomposition. Take our sample's HSL reading, hold hue at 217 degrees, and vary only lightness:
| Value | Resulting hex |
|---|---|
| hsl(217, 91%, 20%) | #052861 |
| hsl(217, 91%, 35%) | #0846aa |
| hsl(217, 91%, 50%) | #0b64f4 |
| hsl(217, 91%, 65%) | #5593f7 |
| hsl(217, 91%, 80%) | #9ec1fa |
Five coordinated shades from one number changed, which is precisely how design-system palettes get built. Rotating hue instead yields instant complements and triads, the relationships the hsl cylinder model illustrates: spinning our blue's 217-degree angle around the wheel lands you on warm reds, greens, and magentas while saturation and lightness hold steady. Attempting either operation in hex means editing three unrelated byte pairs blind.
Choosing by task
| Task | Best pick |
|---|---|
| Copying values between design tools and code | Hex |
| Building tints, shades, or theme ramps | HSL |
| Working from eyedropper or sensor output | RGB |
| Translucent overlays and states | RGB or HSL with alpha syntax |
| Teaching color relationships to newcomers | HSL |
CSS Color 4 adds perceptually uniform spaces such as oklch that improve on HSL's quirks, notably how its lightness misjudges yellows versus blues; the CSS Color 4 specification details these spaces, and browsers now support them broadly. For most everyday work, though, the classic trio covers everything teams actually ship.
Converting and checking daily
- Check readable pairs against WCAG's contrast minimum criterion; the RGB spelling's reference page documents the channel values feeding that math
- Translate between formats instantly with the hex to RGB converter; when we rebuilt our own palette during research, every value moved through this loop first
- Explore ramps and palettes visually with the color picker and palette generator
- Verify text pairs still pass accessibility after recoloring using the contrast checker, since our WCAG contrast guide shows one shade decides pass or fail
- Cross-check tricky pairs against WebAIM's contrast tool, then feed chosen stops into the gradient generator when moving from single colors to transitions
Pick the notation that matches the edit
Hex vs RGB vs HSL ends as a question about intent rather than correctness. Hex carries bytes faithfully between tools; RGB speaks the screen's native channel language; HSL exposes the knobs humans actually turn when designing. Learn to read one color in all three, lean on conversion tooling instead of memorizing formulas, and let the task name the format.
Written by
Mei Lin Chen
A hex code does not describe a colour. It describes a number, and the meaning of that number depends on a colour space the code itself does not name. It describes a number, and the meaning of that number depends on a colour space that the code itself does not name. That is the root of most mismatches.
Two hex values converted through rgb and compared as strings will disagree, because the conversion rounds to eight bits per channel and the two paths round differently. Values equal before rounding are rarely equal after. HSL is where the surprise compounds. Hue, saturation and lightness describe a point in a space built for human perception, but the space is cylindrical and the colours of equal lightness are not equally bright, which is a well-known defect and the reason HSLuv exists.
Using HSL to pick a text colour and a background produces pairs with wildly different contrast. Gamma is the part worth the effort. Screens apply a transfer curve so that a mid grey looks mid, and skipping that curve makes everything look washed out. Any conversion between an sRGB hex value and a linear-light working space has to account for it, and colour tools that ignore gamma produce subtly wrong results at every step.
Alpha deserves its own note. An eight-digit hex value with an alpha channel and a separate opacity property are not interchangeable, and alpha applied to a colour with an existing background produces a blend against that background rather than a new colour. For contrast I use the WCAG ratio formula, which operates on relative luminance and gives the number accessibility decisions are based on. CMYK appears only in print contexts, where the conversion is approximate because it depends on the press.