colors.to

Guide

Build custom Tailwind v4 colors with OKLCH

Generate a perceptually ordered 50–950 scale and export Tailwind v4 theme variables with accessible role guidance.

1

Choose a meaningful 500 anchor

The source brand color does not always belong at exactly 500, but treating it as the anchor gives the generated scale a predictable center.

2

Control lightness before chroma

A usable interface scale needs a deliberate lightness progression. Reduce chroma near the lightest and darkest ends to keep colors inside common display gamuts.

3

Map scales to semantic roles

Use numeric colors as primitives, then assign semantic variables such as primary, surface, text, border, hover, and focus so future changes remain manageable.