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, peak vividness mid-ramp, and space steps evenly in perceived lightness rather than HSL lightness.

Primitives name a value by hue and step, like --blue-500, and are never applied 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 is the better default for design decisions because it models perceived contrast more accurately, 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 very old browser matrices need a fallback declared first with an @supports override. Match whatever notation the project already uses; convert only when asked or when a migration is explicitly in scope.

Mechanical reversal is only a starting point. Dark appearances need reduced vividness, wider separation at the dark end, and every contrast pair remeasured, because contrast is not symmetric between light and dark polarities.

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