better-colors

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

Primitives name a value by hue and step, like --blue-500, and are never used in components. Semantic tokens name a role, like --color-text-secondary, point at a primitive, and are the only tier components reference, which is what makes theming possible.

APCA models perceived contrast more accurately and is the better default for design decisions, using Lc thresholds like 75 for body text. WCAG 2 ratios remain required when the project must make a formal WCAG conformance claim.

oklch is Baseline 2023, so modern browsers support it natively. For older browser matrices, declare the sRGB or hex value first, then override inside an @supports (color: oklch(0 0 0)) block.

A dark palette is not a mechanical reversal. After swapping semantic roles, reduce vividness since colors read as neon on near-black, widen separation at the dark end, and remeasure every contrast pair because contrast is not symmetric across appearances.

Change lightness, the channel contrast responds to, while holding hue and saturation constant, then remeasure. Note that mid-lightness backgrounds cap achievable contrast, so the background itself may need to move toward an extreme.