Design guide · English edition October 10, 2026

Color Theory for Web Design: A Practical Guide

A five-color mood board stops being enough when a page needs borders, hover states, readable text, and error messages. Build colors around interface roles, then check the actual combinations rather than choosing everything by eye.

Think in hue, saturation, and lightness

HSL separates three decisions: hue is the angle around the color wheel, saturation controls how colorful a shade is, and lightness moves it toward black or white. Hue runs around 360 degrees; saturation and lightness use percentages. These are useful controls for exploring a palette, not a guarantee of equal perceived brightness.

Use hue to explore harmonies, lower saturation for supporting surfaces, and vary lightness for a scale. Hex values such as #8b7bff are convenient to copy into CSS; HSL makes the relationship between candidate colors easier to reason about. The palette generator shows values you can export.

Choose a harmony as a starting point

Analogous: neighboring hues

Nearby hues, such as a base color and neighbors around ±30°, can create a calm, coherent palette. They suit portfolios and content-led sites, but similar colors may not create enough hierarchy. Give primary actions stronger contrast or a distinct role.

Complementary: opposite hues

Hues around 180° apart create stronger visual tension. Let one dominate and reserve the other for emphasis rather than covering equal areas with two saturated opposites.

Triadic: three hues around 120° apart

A triad can help distinguish categories or chart series. Try keeping one hue prominent while reducing the saturation of the supporting colors. These are design choices, not fixed accessibility rules.

Split complementary

Use a base hue and the neighbors of its opposite. This offers another route to a distinct accent without relying on a single strong opposing pair. Compare all options using your brand color in the palette generator, or extract a starting palette from an image.

Use 60–30–10 as a hierarchy heuristic

• 60% dominant: page backgrounds and large neutral surfaces.
• 30% supporting: cards, section surfaces, borders, and quieter brand tints.
• 10% accent: the main action, selected links, focus cues, or active states.

This is a practical starting point, not a requirement to count screen pixels. If every title, icon, border, and button uses the accent, it loses its ability to direct attention. Test the proportions on a full page in Live Colors.

Build scales instead of inventing one-off colors

One brand color may need variants for a subtle background, a normal border, a hovered border, secondary text, links, a button, and its pressed state. An eleven-step scale from 50 to 950 provides a consistent vocabulary.

• 50–100: light surfaces and subtle row backgrounds.
• 200–300: borders and separators, where their actual contrast is sufficient.
• 400–600: core brand shades.
• 700–800: darker variants to test for links or interaction states.
• 900–950: deep surfaces or text on light backgrounds.

These assignments depend on the theme and measured combinations. A step number does not certify contrast. Store the chosen colors in CSS variables so a brand update changes the scale rather than dozens of unrelated declarations.

Check contrast on the real background

WCAG 2.2 Level AA calls for at least 4.5:1 for normal text and 3:1 for large text, with defined exceptions. Large text means at least 18 pt, or 14 pt bold. Level AAA raises those thresholds to 7:1 and 4.5:1. See the W3C explanations of minimum text contrast and enhanced contrast.

Meaningful graphical information and the visual cues needed to identify controls or their states generally need 3:1 against adjacent colors, subject to the criterion's exceptions. See non-text contrast.

Measure text against its card surface, not an unrelated page background. If a brand tint fails for small text, test a darker or lighter step from the same family. Do not use color as the only way to communicate an error: include a clear message and another appropriate cue. Passing a color ratio alone does not establish that an entire page is accessible or legally compliant.

Common color mistakes

• Giving every color the same high saturation.
• Using an accent everywhere instead of reserving it for priority.
• Making decorative elements look identical to interactive links.
• Copying a beautiful palette without checking text at its actual size and background.
• Creating dark mode by simply inverting every color. Revisit surfaces, text, and saturation as a system.

Apply it to a real page

Build a palette and scales in the palette generator, test them in Live Colors, and copy the CSS variables. Continue with SVG icon colors or the English guides.