OKLCH Studio · Tailwind v3 → v4

Tailwind indigo-950: v3 #1e1b4b vs v4 oklch(0.257 0.090 281.3)

Unchangedindigo-950 is effectively the same colour in v3 and v4 (ΔE-OK 0.39).

Tailwind v3#1e1b4b
Tailwind v4oklch(0.257 0.090 281.3)
Tailwind indigo-950 values in v3 and v4
v3 hex#1e1b4b
v3 as oklch()oklch(0.257 0.086 281.3)
v4 oklch()oklch(0.257 0.090 281.3)
v4 hex#1E1A4D
ΔE-OK (×100)0.39
ΔL (v4 − v3)0
ΔC (v4 − v3)0.004
ΔH (v4 − v3)0°

Copy code

Tailwind v3 usage

color: #1e1b4b;

// tailwind.config.js (v3)
colors.indigo[950] // #1e1b4b

Tailwind v4 @theme token

@theme {
  --color-indigo-950: oklch(0.257 0.090 281.3);
}

.example {
  color: var(--color-indigo-950);
}

Keep the v3 colour in v4

@theme {
  --color-indigo-950: #1e1b4b;
}

Related

← All Tailwind v3 to v4 colors