Building a Color System

Picking a few colors you like is the easy part - and it does not scale. The moment a product has dozens of components, multiple states, and a dark mode, ad-hoc colors collapse into chaos: seventeen almost-identical grays, buttons that fail contrast on half the surfaces, a dark theme that is a frantic find-and-replace. A color system replaces all of that with structure - a small set of scales and a layer of named tokens - so every screen draws from the same well.

The payoff is consistency, accessibility, and changeability. Rebrand, retheme, or fix a contrast bug in one place and it propagates everywhere, because components never hard-code a color - they reference a role.

The atom of a color system is the tonal scale: one hue rendered at a fixed ladder of lightness steps, conventionally numbered 50 (lightest) through 950 (darkest). Build it in a perceptual space like OKLCH so the steps feel evenly spaced and the hue stays put - a naive HSL ramp drifts in hue and bunches up in lightness. Pick a base and generate the whole ladder.

Scales are raw material; tokens are how the system is actually used. The trick is two levels. Primitive tokens name the raw steps - --blue-600, --neutral-100 - a stable vocabulary for the palette. Semantic tokens name roles - --color-surface, --color-text, --color-primary - and point at a primitive. Components reference only semantic tokens, never raw colors.

A theme is just a different mapping of semantic tokens to scale steps. Light mode points surface at step 50 and text at 900; dark mode points surface at 900 and text at 100. The components never change - only the map flips. Watch the same UI re-theme below.

A scale is only useful if you know which steps can safely sit on which. The contrast matrix below computes the WCAG ratio for every text-step on every background-step pairing in your scale - green where it clears AA (4.5:1) for normal text. It is the map that tells you "text-900 on surface-100: yes; text-500 on surface-300: no."

Real systems are not one scale but a small set. At minimum you want a neutral ramp (low chroma - for backgrounds, borders, and text), a primary ramp (the brand action color), and often an accent for highlights. Generate them with the same lightness ladder so they stay in lockstep, varying only hue and chroma.

Beyond brand and neutral, a system needs semantic state colors for feedback - and these carry meaning, so convention beats creativity. Each gets its own small scale and its own contrast-checked pairs (a light background tint plus a dark text/icon).

The system lives as design tokens - a single, named source of truth that exports to every platform: CSS custom properties, Sass, Tailwind config, iOS/Android, Figma variables. Define them once; generate the rest. The semantic layer is where light/dark and brand variants are switched.

Six questions on scales, tokens, themes, and contrast. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.

A color system pulls together theory, perceptual scales, contrast, and theming. The numbers reflect each article's position in the editorial roadmap.