The same color, four different ways
A single color on screen can be written as #FF6B35, rgb(255, 107, 53), or hsl(16, 100%, 60%) — all identical, just different coordinate systems for the same point in color space. Understanding what each number actually means makes picking, adjusting, and debugging colors far less like guesswork.
HEX: RGB in base 16
Hex color codes are just RGB values written in base-16 (hexadecimal) instead of base-10, packed into a 6-digit string: #RRGGBB. #FF6B35 breaks down as FF (255) red, 6B (107) green, 35 (53) blue. The shorthand 3-digit form (#F63) expands by duplicating each digit (#FF6633), which is why it can only represent a subset of colors — 4,096 instead of 16.7 million.
RGB: light, not pigment
RGB describes color as additive light — red, green, and blue channels combining, each 0–255. This models how screens actually work (each pixel is three tiny light sources), which is why RGB is the native format for anything rendered on a display. It doesn't map intuitively to how humans describe color ("make it a bit more orange") — that's what HSL is for.
HSL: how humans actually describe color
HSL — Hue, Saturation, Lightness — reframes the same color space around human perception:
- Hue (0–360°): the color itself, positioned on a color wheel (0°/360° = red, 120° = green, 240° = blue).
- Saturation (0–100%): intensity, from gray (0%) to fully vivid (100%).
- Lightness (0–100%): from black (0%) through the pure hue (50%) to white (100%).
This is why HSL is easier to hand-tune: "keep the hue, make it lighter" is a one-number change (lightness) in HSL, but requires recalculating all three RGB channels proportionally.
| Task | Easier in |
|---|---|
| "Make this 20% darker" | HSL (lower lightness) |
| "Generate 5 shades of the same hue" | HSL (vary lightness, fix hue) |
Feeding a GPU shader or canvas pixel buffer |
RGB (native format) |
| Copy-pasting into most CSS/design tools | HEX (most common interchange format) |
WCAG contrast ratios
Accessibility guidelines (WCAG 2.1) define legibility with a contrast ratio between text and background luminance, ranging 1:1 (identical colors) to 21:1 (pure black on white). The thresholds:
- 4.5:1 — minimum for normal body text (AA).
- 3:1 — minimum for large text (18pt+, or 14pt+ bold) and UI components (AA).
- 7:1 — enhanced contrast for normal text (AAA).
The ratio comes from relative luminance, a weighted formula (0.2126×R + 0.7152×G + 0.0722×B after gamma-correcting each channel) — green contributes far more perceived brightness than blue, which is why a "bright" blue can still fail contrast checks against white.
Common mistakes
- Judging contrast by eye. Two colors that look "different enough" can fail 4.5:1 in practice, especially for colorblind users — always check the actual ratio, not intuition.
- Converting HEX↔HSL by hand and rounding too early. Small rounding errors compound across hue/saturation/lightness math and can shift a color noticeably after a round trip.
- Assuming saturation and lightness are independent of perceived brightness. Two HSL colors with identical lightness values (e.g., pure yellow vs. pure blue at L=50%) can look very different in actual brightness — HSL models a color wheel, not human luminance perception.
- Ignoring color blindness. Red/green distinctions (the most common form of color blindness, affecting ~8% of men) are invisible to a meaningful share of users — never encode meaning in hue alone; pair color with icons, labels, or patterns.
FAQ
Which format should I store in my design system?
HEX for interchange (it's compact and universally supported), HSL for anywhere you need to programmatically generate variants (hover states, shades, tints) from a base color.
Why does the same HSL lightness look brighter for yellow than blue?
HSL lightness is a geometric midpoint on the color wheel, not a measure of perceived brightness — human vision is far more sensitive to yellow-green light than blue, so equal "lightness" values don't look equally bright.
Is a 3:1 contrast ratio always enough?
Only for large text (18pt+/14pt bold) and non-text UI elements under WCAG AA — normal body text needs 4.5:1.
Can two RGB colors that look identical have different hex codes?
No — HEX, RGB, and HSL are exact, lossless representations of the same value; if two colors render identically, their codes convert to the same underlying RGB triplet.
Check real contrast ratios and extract palettes from any image with the Color Palette Extractor, or preview how a design looks to colorblind users with the Color Blindness Simulator.