Better Colors

Colors

A color system is a small set of ramps, named by role, applied consistently, and verified against the backgrounds they actually render on. Almost every color problem is a system problem: a value picked in isolation, a token borrowed because it looked right, or a pair nobody measured. Contrast requirements belong to better-accessibility; surfaces, shadows, and icon color belong to better-ui.

Quick Reference

Core Principles

1. Match the Project's Color System

Reuse the project's existing tokens and notation. Introducing a second color representation to fix one value makes the palette harder to reason about, not easier — a consistent hex system beats a hex system with oklch() scattered through it. Notation is not a defect. For a genuinely new system, oklch() is the best default because its numbers behave the way the ramp rules below describe; everywhere else a color library produces the same ramp in whatever the project writes (color-formats.md).

2. A System Is Ramps, Not Colors

One neutral ramp, one accent ramp, and only the status ramps the product actually renders. A warning ramp nothing imports is maintenance for zero pixels, and a second accent hue earns its place only when two things must be distinguishable at a glance.

3. Every Step Has a Job

A ramp is not a gradient to pick from by eye. Each step exists because a role needs it — page background, component hover, border, solid fill, body text — and a step no role consumes should not be generated. Both the Tailwind 50–950 and Radix 1–12 conventions map to those roles (palette-structure.md).

4. Name Primitives by Hue, Semantics by Role

Primitives name a value (--blue-500) and are never applied in a component. Semantic tokens name a job (--color-text-secondary), point at a primitive, and are the only tier components reference. That seam is what makes theming possible; without it, dark mode means auditing every usage to work out which ones meant "the accent" and which just wanted blue (token-naming.md).

5. Use a Token Only in Its Role

Never borrow a token because its value is right today. A separator used as a text color works until borders get lighter, and then the text goes with them. If a role has no token, add the token.

6. Hold the Hue Across the Ramp

Steps step evenly in perceived lightness, hue stays constant end to end, vividness peaks mid-ramp and falls off at both ends, and steps sit denser at the light end than the dark. Both ends stop short of pure black and white, which cannot carry hue at all. Use a color library rather than eyeballing it (palette-generation.md).

7. One Color, One Meaning

Use a color for one purpose across the whole interface, treating anything within 15° of hue as the same color. If the accent means interactive, that hue on static text tells users to click something that is not clickable — and an interactive element rendered neutral is just as misleading. Color is never the only carrier of meaning; better-accessibility owns that requirement.

8. Fill Exactly One Action per View

When filled color encodes primary emphasis, one primary action gets it and peer actions stay neutral. Put the color on the background rather than the label: a filled button reads as primary across the room, while accent-colored text on a neutral button reads as a link. Several colored backgrounds are fine when they encode distinct states or categories rather than competing as peers.

9. Measure the Rendered Pair, Then Report

Measure a foreground against the background it actually renders on, not the page background. When a pair fails, report it — the pair, its measured value, and the threshold it misses — and leave the colors alone. A project's colors are a design decision; change them only when asked, and remeasure after (contrast.md).