OKLCH Studio · Tailwind v3 → v4

Tailwind purple-700: v3 #7e22ce vs v4 oklch(0.496 0.265 301.9)

ChangedIn v4, purple-700 is more saturated than in v3 (ΔL 0.000, ΔC +0.028, ΔH 0.0°).

The v4 value is outside the sRGB gamut, so #8200DB is a clipped sRGB approximation; wide-gamut displays can show it more vivid.

Tailwind v3#7e22ce

Tailwind v4oklch(0.496 0.265 301.9)

Copy code

Tailwind v3 usage

color: #7e22ce;

// tailwind.config.js (v3)
colors.purple[700] // #7e22ce

Tailwind v4 @theme token

@theme {
  --color-purple-700: oklch(0.496 0.265 301.9);
}

.example {
  color: var(--color-purple-700);
}

Keep the v3 colour in v4

@theme {
  --color-purple-700: #7e22ce;
}