How v2 ramps fifty hues into ten shades.

How the engine does it#

Each hue defines anchor points; the generator interpolates lightness/saturation into a ten-step ramp, then emits text-/bg-/border- utilities per shade.

Example#

js
theme: { colors: { azure: true, coral: true } }
// → text-azure-100…950, bg-azure-100…950, …

From v2 to v3#

Everything in this article survives the upgrade — the v2 → v3 migration guide keeps the generator API stable while fixing spacing and responsive bugs.

Utilities · Themes · Configuration