Color guide

Practical color theory for UI palettes

Start with one base color, choose a harmony rule, verify contrast, then export tokens. This guide covers the decisions that matter in real interface work.

Open in the main toolBack to tool
EnglishItalianoEspañolFrançaisDeutsch

Harmony rules

Each harmony type produces a different emotional result and suits different interface contexts.

  • Complementary — opposite hues on the color wheel. Strong contrast, good for CTAs and alert states. Use carefully: too much complementary color looks aggressive.
  • Analogous — adjacent hues. Calm and cohesive. Works well for content-heavy interfaces where you want visual consistency without tension.
  • Triadic — three evenly spaced hues. More expressive and energetic. Hard to balance; keep two colors subdued and use the third as an accent only.
  • Split-complementary — a base color plus two colors adjacent to its complement. More flexibility than complementary with less visual tension.
  • Monochromatic — one hue at different lightness and saturation levels. Safest choice for enterprise products and data-dense interfaces.

Use shades correctly

The shade scale from 50 to 950 maps directly to interface roles.

  • Use 500 as the primary brand shade — it is the reference point for the scale.
  • Use 600 and 700 for hover and active states on interactive éléments.
  • Use 50 and 100 for page backgrounds and surface fills — never a saturated color behind a paragraph.
  • Use 800 and 900 sparingly for dark text on light surfaces when a near-black is needed without losing brand hue.

WCAG contrast in practice

Contrast requirements are not optional when text is involved.

  • Body text requires 4.5:1 at WCAG AA. This is the minimum for anything users need to read.
  • Large text (18pt or 14pt bold) requires 3:1 at AA.
  • AAA requires 7:1 for normal text. Not mandatory for all content, but recommended for long-form reading.
  • Decorative éléments, disabled controls and logotypes are exempt from contrast requirements.
  • Active UI components — icons that convey information, focus indicators — must meet 3:1 against adjacent colors.
Which harmony should I start with for a SaaS product?

Analogous or monochromatic. Both read as calm and professional. Use a complementary accent for CTAs only, not for general UI éléments.

How many named colors should a design system have?

One primary scale (50–950), one neutral scale, one or two semantic colors (success, error, warning). More than that without a clear role creates maintenance problems quickly.

Why does my palette look fine in Figma but fail contrast?

Figma renders on a calibrated screen at a specific zoom level. Contrast ratios are computed mathematically. A color that looks readable at 2× zoom may fail at body text size on a standard display.

Is OKLCH better than HSL for palette generation?

Yes, for perceptual uniformity. OKLCH is designed so equal numerical steps produce equal perceived lightness changes across different hues. HSL does not guarantee this. Chromaforge generates shades in HSL for broad compatibility but displays OKLCH values in the inspector.