Color Theory for Web Designers: HEX, RGB, HSL and Why HSL Wins

HEX is what designers paste. RGB is what computers store. HSL is what designers should think in. The three formats represent the same colours but each one optimises for different things. If you've ever tried to "make this blue slightly more vibrant" and ended up tweaking six hex digits, this guide is for you.

The three colour models

HEX — the storage format

A hex code is just RGB packed into a string. #3b82f6 means:

• 3b = 59 (red intensity 0-255)
• 82 = 130 (green)
• f6 = 246 (blue)

HEX is great for storage and copy-paste between tools but useless for thinking about colour. You cannot "see" what #9333ea looks like just by reading it.

RGB — the computer format

Same data as HEX, written as decimals: rgb(59, 130, 246). The values 0-255 reflect the intensity of red, green and blue subpixels on a screen. Adding all three at max gives white; subtracting them gives black.

RGB and HEX are basically the same model with different notation. Tools sometimes accept one and not the other — that's their only practical difference.

HSL — the designer format

HSL breaks colour into three intuitive dimensions:

• Hue (0-360°): where on the colour wheel. 0=red, 120=green, 240=blue.
• Saturation (0-100%): how vivid vs gray. 0% is fully gray, 100% is pure colour.
• Lightness (0-100%): how light vs dark. 0% is black, 100% is white, 50% is "pure" colour.

The same colour #3b82f6 in HSL is hsl(217, 91%, 60%). That tells you: a blue (217° is in the blue range), vibrant (91% saturation), slightly bright (60% lightness).

Why HSL is what designers should think in

With HSL you can make precise, semantic edits:

• Want a more vibrant version? Increase saturation.
• Want it darker for hover state? Decrease lightness by 10%.
• Want a complementary colour? Add 180° to the hue.
• Want a triadic palette? Three hues 120° apart.
• Want lighter tints? Step up lightness in increments.

With HEX, every adjustment is a guessing game. With HSL, it's a calculation.

Building a palette in 5 steps

1. Pick one primary colour

Start with HSL. A good primary for most brands lives around 50-60% lightness and 70-95% saturation. The lightness range keeps it readable both on light and dark backgrounds.

2. Create tints and shades

Keep hue and saturation the same. Vary only lightness in 10% increments:

Primary 90% lightness — almost white
Primary 75% — light tint
Primary 60% — base colour
Primary 50% — slightly darker
Primary 35% — dark shade
Primary 20% — very dark

That gives you a 6-step scale ready for Tailwind-style "primary-50, primary-100…primary-900" systems.

3. Add a secondary / accent colour

The proven techniques:

• Complementary: primary + 180°. High contrast. Risk: clashing.
• Triadic: primary + 120° + 240°. Vibrant, balanced.
• Analogous: primary ± 30°. Harmonious, subtle.
• Split-complementary: primary + 150° + 210°. Strong contrast without the clash.

4. Choose neutrals (grays)

Don't use pure grays (HSL with 0% saturation). Add a touch of your primary hue:

Cool gray (with blue primary): hsl(220, 10%, 50%)
Warm gray (with orange primary): hsl(30, 10%, 50%)

Tinted grays feel more cohesive with your brand than dead-neutral ones. 5-15% saturation is the sweet spot.

5. Plan dark mode

Don't just invert the palette. Dark mode needs:

• Reduced saturation — pure colours look searing on dark backgrounds.
• Adjusted lightness — colours used at 50% lightness in light mode often work better at 60-70% in dark mode.
• Slightly different hues for accents — neon yellows turn into cream-yellows; pure reds become coral.

Accessibility — contrast ratios

WCAG accessibility guidelines require:

• 4.5:1 contrast for normal text on background.
• 3:1 contrast for large text (18pt+ or 14pt bold+).
• 3:1 contrast for UI components and graphical objects.

The fastest way to design accessibly: use HSL, set background lightness to one end of the scale (say 95%) and foreground text to the other (say 15%). 80% lightness difference virtually guarantees accessible contrast.

Tools to check: WebAIM's contrast checker, Chrome DevTools' built-in checker.

The new colour spaces (OKLCH and friends)

HSL has one flaw: a "lightness" of 50% doesn't look equally bright for all hues. Yellow at HSL 50% looks brighter than blue at HSL 50%. This is why two equally lightness-rated colours can have different perceived contrast.

OKLCH solves this with perceptually-uniform lightness. Tailwind CSS v4 and modern design systems (including this site) use OKLCH for tokens. If you're building a serious design system in 2026, investigate it. For everyday use, HSL is still excellent.

Common mistakes

• Using pure black (#000) for text. Pure black on white is harsh. Try hsl(0, 0%, 15%) or #1f1f1f.
• Using pure white (#fff) for backgrounds. Subtle off-white (#fafafa) is easier on the eyes.
• Over-saturating accents. 100% saturation rarely looks professional. Pull back to 70-90%.
• Building palette without a system. Scattered colours = visual chaos. Pick a structure (complementary, triadic, etc.) and stick to it.

The 5-minute palette

1. Open the Color Picker.
2. Pick your primary using HSL sliders. Aim for 60% lightness, 70-90% saturation.
3. Use the lightness palette to generate 6 shades.
4. Add 180° to the hue for a complementary accent.
5. Test text contrast against background (4.5:1 minimum).