better-colors

Place the brand color on the solid-fill step (Tailwind 500 or Radix 9), then build the ramp outward using perceptual interpolation with a library like culori. Keep hue constant, space steps evenly in perceived lightness, and let vividness peak mid-ramp.

Measure the foreground against the background it actually renders on, not the page background. Use APCA thresholds (Lc 75 for body text, Lc 60 for non-body) as the default, or WCAG 2 ratios (4.5:1 for normal text) when legal conformance is required.

Match whatever notation the project already uses, since consistency beats format. For a genuinely new color system, oklch is the best default because its lightness is perceptually uniform and hue stays stable across a ramp.

Use two tiers: primitives named by hue and step (--blue-500) and semantic tokens named by role (--color-text-secondary). Components reference only the semantic tier, so dark mode repoints the semantics without touching any component.

A dark palette is not the light one mechanically reversed. After swapping roles, reduce vividness since colors read as neon on near-black, widen separation at the dark end, and remeasure every contrast pair because APCA is not symmetric.

Report the failing pair, its measured value, and the missed threshold without changing colors, since they are a design decision. Only adjust when asked, and then change lightness rather than hue, remeasuring afterward.