Color Theory Basics: HEX, RGB, HSL Explained for Designers
HEX, RGB, and HSL describe the same colors in different ways. Understanding how they relate makes picking, adjusting, and communicating colors far more reliable.
HEX (#RRGGBB)
Two hex digits each for red, green, blue (00–FF). #5b5bd6 = R=91 G=91 B=214. Compact and copy-paste friendly — the dominant format in CSS and design tools. Shorthand: #aabbcc → #abc when both digits in each pair match.
RGB (Red, Green, Blue)
Each channel as decimal 0–255. rgb(91,91,214) equals #5b5bd6. Additive: all max = white, all zero = black. rgba() adds transparency (0=transparent, 1=opaque).
HSL (Hue, Saturation, Lightness)
Most human-friendly model. Hue = color wheel degrees (0=red, 120=green, 240=blue). Saturation = vividness (0%=grey, 100%=fully saturated). Lightness: 0%=black, 50%=normal, 100%=white. Fix hue and saturation, step lightness to generate color scales.
#5b5bd6 in all three:
HEX: #5b5bd6 RGB: rgb(91,91,214) HSL: hsl(240,62%,60%)
When to Use Each
| Format | Best for |
|---|---|
| HEX | Design tokens, brand colors, Figma output |
| RGB | Canvas, image processing, alpha compositing |
| HSL | Building scales, hover states, dark mode |
Accessibility
WCAG 2.1 requires 4.5:1 contrast for normal text, 3:1 for large text. The purple #5b5bd6 on white gives ~4.5:1 — just at the threshold. Always test with a contrast checker.