Between the Tailwind Palettes

Tailwind CSS v4 made a significant shift in how colors are defined, moving from the sRGB to Display P3 and writing them in OkLCh notation.

OkLCh's perceptually uniform structure combined with the wider P3 gamut makes color manipulation dramatically simpler and predictable, while colors being more vibrant.

This change opened up an interesting possibility: what if we could generate entirely new Tailwind-like palettes by interpolating between existing ones?

New Palettes#

Tailwind v4 ships with 17 accent palettes (red, blue, green, etc.) and 4 neutral palettes (slate, gray, zinc, neutral). In December 2025, the Oatmeal Kit by Tailwind Plus introduced 4 additional neutral palettes: Mauve, Mist, Olive, and Taupe.

With these additions, we now have 8 neutral palettes which are enough data points to fill the gaps between them through interpolation.

Since Tailwind CSS v4.2.0 (released on 18/02/26) ships with this new four palettes by default.

How It Works#

Each Tailwind palette contains 11 shades (50, 100, 200...950). The key insight is using shade as an anchor point which is shade 500, this represents the "true" color of each palette and sits at a specific hue value in OkLCh space.

By mapping all known palettes to their hue values, we can:

1. Take any hue input (0-360°)
2. Find the two nearest known palettes
3. Interpolate between them using linear interpolation (lerp)
4. Generate a complete 11-shade palette

Because OkLCh is perceptually uniform, this interpolation produces smooth, natural-looking results that maintain Tailwind's carefully crafted luminance progression across shades.

For example, if you want a palette at hue 100° (somewhere between yellow ~86° and lime ~130°), the algorithm interpolates lightness, chroma, and hue values for each shade level between these two, creating a cohesive new palette.

Playground#

Here's an interactive demo:

Features:

• Drag the hue slider (0-360°) to generate palettes
• Toggle between accent and neutral sets
• Copy generated palettes as CSS custom properties
• Switch to grid view and click any shade to set it as the anchor
• Snap to the closest known Tailwind palette

Conclusion#

This approach lets us generate brand-specific color palettes that feel native to Tailwind's design system.

Instead of being limited to the ~20 shipped palettes, we can explore the full 360° hue spectrum while maintaining the same Tailwind-like feeling.

The technique works because OkLCh handles the complexity of perceptual uniformity, something that would produce muddy or inconsistent results in RGB or even HSL, so instead of using some curves that are calculated based on luminance, we can just stick to lerp, which is way simpler.