OKLCH Studio · Tailwind v3 → v4

Tailwind blue-100: v3 #dbeafe vs v4 oklch(0.932 0.032 255.6)

Unchangedblue-100 is effectively the same colour in v3 and v4 (ΔE-OK 0.04).

Tailwind v3#dbeafe

Tailwind v4oklch(0.932 0.032 255.6)

Copy code

Tailwind v3 usage

color: #dbeafe;

// tailwind.config.js (v3)
colors.blue[100] // #dbeafe

Tailwind v4 @theme token

@theme {
  --color-blue-100: oklch(0.932 0.032 255.6);
}

.example {
  color: var(--color-blue-100);
}

Keep the v3 colour in v4

@theme {
  --color-blue-100: #dbeafe;
}