OKLCH Studio · Tailwind v3 → v4

Tailwind pink-700: v3 #be185d vs v4 oklch(0.525 0.223 4.0)

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

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

Tailwind v3#be185d

Tailwind v4oklch(0.525 0.223 4.0)

Copy code

Tailwind v3 usage

color: #be185d;

// tailwind.config.js (v3)
colors.pink[700] // #be185d

Tailwind v4 @theme token

@theme {
  --color-pink-700: oklch(0.525 0.223 4.0);
}

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

Keep the v3 colour in v4

@theme {
  --color-pink-700: #be185d;
}