OKLCH Studio · Tailwind v3 → v4

Tailwind violet-500: v3 #8b5cf6 vs v4 oklch(0.606 0.250 292.7)

ChangedIn v4, violet-500 is more saturated than in v3 (ΔL 0.000, ΔC +0.031, ΔH 0.0°).

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

Tailwind v3#8b5cf6

Tailwind v4oklch(0.606 0.250 292.7)

Copy code

Tailwind v3 usage

color: #8b5cf6;

// tailwind.config.js (v3)
colors.violet[500] // #8b5cf6

Tailwind v4 @theme token

@theme {
  --color-violet-500: oklch(0.606 0.250 292.7);
}

.example {
  color: var(--color-violet-500);
}

Keep the v3 colour in v4

@theme {
  --color-violet-500: #8b5cf6;
}