Color Theory for Designers: HEX, RGB, HSL and Color Harmony Explained

Color is one of the most powerful tools in a designer's arsenal — and one of the most misunderstood. Bad color choices make interfaces look amateur, create accessibility violations, and confuse users. Good color choices create instant mood, guide attention, and build trust. This guide covers the theory you need to make better decisions.

The Three Color Models You Need to Know

HEX — The Web Standard

HEX codes are the most common way to specify color in web design. Written as #RRGGBB, each pair of characters represents a Red, Green, Blue channel value in base-16 (0–255 mapped to 00–FF).

• #000000 — Pure Black (R:0, G:0, B:0)
• #FFFFFF — Pure White (R:255, G:255, B:255)
• #EC4899 — Hot Pink (R:236, G:72, B:153)

RGB — Programmers' Friend

RGB is identical to HEX conceptually but uses decimal values (0–255) instead of hexadecimal. It's more human-readable for fine-tuning. Use it when you need to programmatically manipulate channels — for example, creating a darker or lighter variant of a color by adjusting the values mathematically.

HSL — Designers' Best Friend

HSL stands for Hue, Saturation, Lightness. This is the most intuitive model for designers:

• Hue (0°–360°) — The base color on the wheel. 0° = red, 120° = green, 240° = blue.
• Saturation (0%–100%) — How vivid is it? 0% is gray, 100% is full color.
• Lightness (0%–100%) — How bright? 0% is black, 100% is white, 50% is the "pure" color.

The power of HSL: to create shades of a color, you change only the Lightness, keeping Hue and Saturation constant. To desaturate, change only Saturation. This is how design systems like Tailwind generate their color palettes (e.g., blue-100 through blue-900).

Color Harmonies — The Rules of Combination

A color harmony is a set of colors that naturally look good together based on their positions on the color wheel.

Accessibility — The Part Most Designers Skip

Color contrast is a legal requirement in most jurisdictions under WCAG 2.1 accessibility guidelines. The contrast ratio between foreground (text) and background must be:

• 4.5:1 minimum for normal text (AA level)
• 3:1 minimum for large text (18pt+ or 14pt+ bold)
• 7:1 for enhanced accessibility (AAA level)

Light gray text on a white background might look sophisticated, but it often fails WCAG AA. Always check contrast ratios with a tool before shipping.

Building a Design Palette Step by Step

1. Pick your primary hue — Choose one color that represents your brand personality. Trust = blue, Energy = orange, Growth = green, Premium = purple.
2. Generate 9 shades — Use HSL, keep Hue and Saturation fixed, vary Lightness from 10% to 95%.
3. Define semantic tokens — Assign shades to roles: --color-bg, --color-text, --color-button, --color-danger.
4. Add a complementary accent — Use the complementary or split-complementary for interactive elements (links, CTAs).
5. Test in both light and dark modes — Colors that look great in light mode can fail in dark mode if they're too bright or low-contrast.