Web colors are encoded in three interchangeable formats: HEX (#RRGGBB) is a compact hexadecimal notation for RGB values; RGB specifies red, green, and blue channels as integers 0–255; HSL describes the same color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). All three are supported natively in CSS and represent the same sRGB color space.
The formula
HEX → RGB:
R = parseInt(hex[1..2], 16) — first two hex digits
G = parseInt(hex[3..4], 16) — middle two hex digits
B = parseInt(hex[5..6], 16) — last two hex digits
#3B82F6 → R=0x3B=59, G=0x82=130, B=0xF6=246
RGB → HEX:
pad each component to 2 hex digits and concatenate
rgb(59, 130, 246) → 3B + 82 + F6 → #3B82F6
RGB → HSL (R, G, B in range 0–1):
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
if max == min: S = 0, H = 0
else:
d = max - min
S = L > 0.5 ? d / (2 - max - min) : d / (max + min)
H = (max == R) ? (G-B)/d + (G<B ? 6 : 0)
: (max == G) ? (B-R)/d + 2
: (R-G)/d + 4
H *= 60°
Practical examples
Example 1 — Brand blue to HSL. Tailwind's blue-500 is #3B82F6 = rgb(59, 130, 246). In HSL: H≈217°, S≈91%, L≈60%. To make a lighter tint: increase L to 80% → a pale sky blue at the same hue and saturation.
Example 2 — Creating a 50% lightness monochrome palette. Start with a hue: H=30° (orange). Set S=100%, vary L: 20% = dark brown, 50% = medium orange, 80% = pale peach. The same hue value across all variants ensures a coherent palette.
Example 3 — Pure primary colors. Red: #FF0000 = rgb(255,0,0) = hsl(0,100%,50%). Green: #00FF00 = rgb(0,255,0) = hsl(120,100%,50%). Blue: #0000FF = rgb(0,0,255) = hsl(240,100%,50%).
Common mistakes
- Using HSL lightness as perceptual brightness. HSL lightness is a mathematical midpoint, not perceptual brightness. Yellow at hsl(60, 100%, 50%) appears much brighter than blue at hsl(240, 100%, 50%) even though both have L=50%. OKLCH is a perceptually uniform alternative if exact brightness matching matters.
- Confusing 3-digit and 6-digit HEX. #RGB is shorthand where each digit repeats: #3BF = #33BBFF, not #3B0F00. A color like #123 is valid CSS meaning #112233.
- Assuming HEX values are case-insensitive in all contexts. CSS is case-insensitive for HEX colors (#3B82F6 = #3b82f6), but some tools and string comparisons are not. Use a consistent casing convention in your codebase.
International and regional variations
| Format | Syntax | Range | Typical use |
|---|---|---|---|
| HEX | #RRGGBB or #RGB | 00–FF per channel | Web, CSS, design tool exports, brand guidelines |
| RGB | rgb(R, G, B) | 0–255 per channel | CSS, canvas API, image processing |
| HSL | hsl(H, S%, L%) | H: 0–360°; S,L: 0–100% | CSS, design tools, generating palettes |
| RGBA / HSLA | rgba(R, G, B, A) | A: 0–1 opacity | CSS transparency, overlays |
| OKLCH | oklch(L C H) | Perceptually uniform | CSS Color 4, Tailwind v4, design systems |