Color Codes: HEX, RGB, HSL & Conversion Guide

Core answer: CSS colors come in HEX (#3B82F6), RGB (rgb(59,130,246)), and HSL (hsl(217,91%,60%)) — three notations for the same sRGB space. Convert HEX↔RGB by pairs of hex digits; use HSL for systematic palettes (hover = lightness −8%). Alpha variants (#3B82F680, rgba, hsla) add opacity. Modern CSS adds oklch() for perceptually uniform palettes.

The three classic notations

Notation	Example	Best for
HEX	#3B82F6	compact copy-paste, design tools
RGB	rgb(59 130 246)	channel math, JS manipulation
HSL	hsl(217 91% 60%)	human reasoning, palette building

Building a palette from one color (the HSL workflow)

Start: primary hsl(217 91% 60%).

Hover: L 60% → 52%
Active/pressed: L 46%
Subtle background: hsl(217 91% 96%)
Border: hsl(217 50% 85%)
Text-on-primary: white at L 60% passes contrast; below L 55% it stops passing — check.

One hue, six roles. This is exactly how Tailwind's 50–900 scales are constructed.

Contrast and accessibility (non-negotiable)

WCAG 2.1 ratios: normal text ≥ 4.5:1, large text (18pt+/14pt bold+) ≥ 3:1, UI components ≥ 3:1. Quick reference on white:

#767676 is the lightest gray passing 4.5:1
#595959 passes 7:1 (AAA)
Yellow (#FACC15) on white fails everything — pair with dark text

Worked examples

Example 1 — HEX→RGB. #10B981: 10=16, B9=185, 81=129 → rgb(16,185,129) — this site's emerald.

Example 2 — Semi-transparent overlay. 60% black scrim: rgba(0,0,0,0.6) or #00000099 (99 hex = 153 ≈ 60%).

Example 3 — Programmatic darkening (JS). Multiply RGB channels by 0.9, clamp to 0–255 — quick but shifts saturation; prefer HSL lightness −6% for cleaner results.

Example 4 — Status palette. success hsl(160 84% 39%) / warning hsl(38 92% 50%) / danger hsl(0 84% 60%) / info hsl(217 91% 60%) — evenly spaced hues, consistent S/L for visual balance.

Common mistakes and myths

Pure black on pure white — 21:1 contrast causes eye strain in long reading; #1a1a1a on #fafafa reads softer and passes AAA.
Color-only meaning — 8% of men have red-green deficiency; pair color with icons/text (never a red/green-only status dot).
Saturation everywhere — professional UIs saturate accents and desaturate surfaces; 100%-saturated backgrounds scream.
Ignoring dark-mode math — inverting lightness naively (L → 100−L) breaks hue relationships; design dark palette separately with elevated surfaces at L 10–18%.
Trusting eyedropper across displays — sRGB vs Display-P3 shifts saturated colors; specify color spaces when it matters (CSS: color(display-p3 …)).

Frequently Asked Questions

How do HEX and RGB convert?

Each hex pair is one channel: #3B82F6 → 0x3B = 59 (R), 0x82 = 130 (G), 0xF6 = 246 (B). Reverse: decimal → hex per channel, pad to 2 digits. rgb(255,128,0) → FF 80 00 → #FF8000. Shorthand #F80 expands to #FF8800 (each digit doubles). RGB percentages: value ÷ 255 (130/255 ≈ 51%).

What is HSL and why do designers prefer it?

HSL separates what humans think about: Hue (0-360° color wheel: 0/360 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta), Saturation (0% gray → 100% vivid), Lightness (0% black, 50% pure color, 100% white). Building a palette: pick H = 220, then L = 95/80/60/40/20 for a clean scale — one variable per step. In RGB the same scale requires touching all three channels blindly.

How do I convert HSL to RGB?

Piecewise math: C = (1 − |2L − 1|) × S; X = C × (1 − |(H/60) mod 2 − 1|); m = L − C/2; then map by hue sector (0-60°: R=C,G=X; 60-120: R=X,G=C; etc.), add m to each, ×255. Nobody does this by hand twice — use the converter. What matters: HSL(220, 90%, 56%) and #3B82F6 are THE SAME color; the models are interchangeable views.

How do alpha (transparency) channels work?

rgba(59,130,246,0.5) = 50% transparent; hex adds a byte: #3B82F680 (80 hex = 128 ≈ 50%). Common stops: FF opaque, CC 80%, 99 60%, 80 50%, 4D 30%, 1A 10%, 00 invisible. Layering note: 50% blue over white ≠ flat light blue in all contexts (compositing order, blend modes) — for critical UI, test on the real background.

How do I build an accessible color palette?

Steps: pick brand hue (H); generate shades by stepping L (95, 88, 75, 60, 45, 30, 18); neutrals = same hue, S ≤ 10%; semantic colors at distinct hues (green ≈ 140, red ≈ 0, amber ≈ 40) — do not derive them from the brand hue. Verify contrast: WCAG AA = 4.5:1 body text, 3:1 large text and UI boundaries. Dark mode: flip L scale, drop S ~10% (colors glow more on dark).

What mistakes happen with color codes?

(1) #RGB vs #RRGGBB shorthand confusion (#ABC = #AABBCC, not #0A0B0C); (2) editing RGB directly to "darken" (use HSL: lower L); (3) pure #000 black and #FFF white everywhere (slightly-off reads better: #0A0D12 / #FAFAFA); (4) alpha hex math (80 = 50%, not 80%); (5) saturation identical across light/dark themes; (6) color-only meaning (8% of males are red-green colorblind — pair color with icons/labels); (7) trusting screen colors across devices — uncalibrated displays shift ±10% easily.