OKLCH Studio · Tailwind v3 → v4

Tailwind sky-300: v3 #7dd3fc vs v4 oklch(0.828 0.111 230.3)

Subtle shiftIn v4, sky-300 is more saturated than in v3 (ΔL 0.000, ΔC +0.010, ΔH 0.0°).

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

Tailwind v3#7dd3fc

Tailwind v4oklch(0.828 0.111 230.3)

Copy code

Tailwind v3 usage

color: #7dd3fc;

// tailwind.config.js (v3)
colors.sky[300] // #7dd3fc

Tailwind v4 @theme token

@theme {
  --color-sky-300: oklch(0.828 0.111 230.3);
}

.example {
  color: var(--color-sky-300);
}

Keep the v3 colour in v4

@theme {
  --color-sky-300: #7dd3fc;
}