Color Theory for Web Designers (Just Enough to Be Dangerous)
The practical color-theory concepts that show up in real web design work, plus the format conversions you'll actually need.
The color models you actually need
HEX and RGB are the same thing in different clothes — three 0–255 channels, one written as #RRGGBB and the other as rgb(r,g,b). Use HEX in CSS defaults; RGB when you need alpha.
HSL (hue, saturation, lightness) is the one designers actually think in. Rotating hue gives you related colors; changing lightness gives you tints and shades.
Building a palette without a degree
Start with one hue
Pick a brand color. Note its H, S and L. Everything else derives from those numbers.
Generate tints and shades
Keep hue and saturation; vary lightness in steps of 10%. You get a scale from 95% (near white) to 10% (near black).
Pick accents by hue rotation
Add 120° to your hue for a triadic accent; add 180° for a complementary accent. HSL to HEX converts them to CSS in one click.
Contrast matters more than beauty
WCAG AA requires 4.5:1 contrast for body text and 3:1 for large text. If your palette can't meet those, no amount of design polish will save it.
Test every text-on-background pair. Adjust lightness — the easiest lever — until you pass.
Key takeaways
Think in HSL; export in HEX or RGB.
Palettes are one hue plus lightness variations plus a couple of rotated accents.
Contrast is a hard requirement, not a nice-to-have.
Frequently asked questions
- How many colors should a web palette have?
- Usually 1 brand color, 5–9 neutral shades, and 2–3 semantic colors (success, warning, error).
- Why HSL over HEX for design?
- HSL matches how humans think about color — it's easy to intuit lightness or hue changes.
- Is CMYK relevant for web?
- Only when preparing print collateral. Convert to RGB for anything on-screen.
- What about OKLCH?
- OKLCH is a better perceptual model and is gaining browser support. It'll matter more in 2027; today HSL is still the practical default.
- How do I check contrast?
- Use a dedicated contrast checker on your text/background pairs, or check in your browser's dev tools.
- Can I use color alone to convey meaning?
- No — always pair with icons or text for colorblind users.
We build and document free, privacy-first browser tools used by writers, students, marketers and developers. Every article is written and reviewed by the same team that ships the tools.
Expertise: Writing workflows, SEO content, text processing, front-end performance
- Last updated:
- Reading time:
- 4 min