Contrast, measured
Every Tailwind CSS shade against white and against black — ratio, APCA Lc, colour-blind simulation, and for anything that fails, the nearest colour of the same hue that would have passed.
By colour family
Slate — full scale
slate-50 · 1.0:1slate-100 · 1.1:1slate-200 · 1.2:1slate-300 · 1.5:1slate-400 · 2.6:1slate-500 · 4.8:1slate-600 · 7.6:1slate-700 · 10.4:1slate-800 · 14.6:1slate-900 · 17.9:1slate-950 · 20.2:1
Gray — full scale
gray-50 · 1.0:1gray-100 · 1.1:1gray-200 · 1.2:1gray-300 · 1.5:1gray-400 · 2.5:1gray-500 · 4.8:1gray-600 · 7.6:1gray-700 · 10.3:1gray-800 · 14.7:1gray-900 · 17.7:1gray-950 · 20.1:1
Zinc — full scale
zinc-50 · 1.0:1zinc-100 · 1.1:1zinc-200 · 1.3:1zinc-300 · 1.5:1zinc-400 · 2.6:1zinc-500 · 4.8:1zinc-600 · 7.7:1zinc-700 · 10.4:1zinc-800 · 14.9:1zinc-900 · 17.7:1zinc-950 · 19.9:1
Neutral — full scale
neutral-50 · 1.0:1neutral-100 · 1.1:1neutral-200 · 1.3:1neutral-300 · 1.5:1neutral-400 · 2.5:1neutral-500 · 4.7:1neutral-600 · 7.8:1neutral-700 · 10.4:1neutral-800 · 15.1:1neutral-900 · 17.9:1neutral-950 · 19.8:1
Stone — full scale
stone-50 · 1.0:1stone-100 · 1.1:1stone-200 · 1.3:1stone-300 · 1.5:1stone-400 · 2.5:1stone-500 · 4.8:1stone-600 · 7.6:1stone-700 · 10.3:1stone-800 · 15.2:1stone-900 · 17.5:1stone-950 · 19.8:1
Red — full scale
red-50 · 1.1:1red-100 · 1.2:1red-200 · 1.4:1red-300 · 1.9:1red-400 · 2.8:1red-500 · 3.8:1red-600 · 4.8:1red-700 · 6.5:1red-800 · 8.3:1red-900 · 10.0:1red-950 · 16.1:1
Orange — full scale
orange-50 · 1.1:1orange-100 · 1.1:1orange-200 · 1.4:1orange-300 · 1.7:1orange-400 · 2.3:1orange-500 · 2.8:1orange-600 · 3.6:1orange-700 · 5.2:1orange-800 · 7.3:1orange-900 · 9.4:1orange-950 · 15.7:1
Amber — full scale
amber-50 · 1.0:1amber-100 · 1.1:1amber-200 · 1.2:1amber-300 · 1.4:1amber-400 · 1.7:1amber-500 · 2.1:1amber-600 · 3.2:1amber-700 · 5.0:1amber-800 · 7.1:1amber-900 · 9.1:1amber-950 · 15.0:1
Yellow — full scale
yellow-50 · 1.0:1yellow-100 · 1.1:1yellow-200 · 1.2:1yellow-300 · 1.3:1yellow-400 · 1.5:1yellow-500 · 1.9:1yellow-600 · 2.9:1yellow-700 · 4.9:1yellow-800 · 6.9:1yellow-900 · 8.7:1yellow-950 · 14.6:1
Lime — full scale
lime-50 · 1.0:1lime-100 · 1.1:1lime-200 · 1.2:1lime-300 · 1.3:1lime-400 · 1.5:1lime-500 · 2.0:1lime-600 · 3.1:1lime-700 · 5.0:1lime-800 · 7.1:1lime-900 · 8.7:1lime-950 · 14.6:1
Green — full scale
green-50 · 1.0:1green-100 · 1.1:1green-200 · 1.2:1green-300 · 1.4:1green-400 · 1.7:1green-500 · 2.3:1green-600 · 3.3:1green-700 · 5.0:1green-800 · 7.1:1green-900 · 9.1:1green-950 · 14.9:1
Emerald — full scale
emerald-50 · 1.1:1emerald-100 · 1.1:1emerald-200 · 1.3:1emerald-300 · 1.5:1emerald-400 · 1.9:1emerald-500 · 2.5:1emerald-600 · 3.8:1emerald-700 · 5.5:1emerald-800 · 7.7:1emerald-900 · 9.7:1emerald-950 · 15.2:1
Teal — full scale
teal-50 · 1.0:1teal-100 · 1.1:1teal-200 · 1.3:1teal-300 · 1.5:1teal-400 · 1.9:1teal-500 · 2.5:1teal-600 · 3.7:1teal-700 · 5.5:1teal-800 · 7.6:1teal-900 · 9.5:1teal-950 · 14.5:1
Cyan — full scale
cyan-50 · 1.0:1cyan-100 · 1.1:1cyan-200 · 1.2:1cyan-300 · 1.4:1cyan-400 · 1.8:1cyan-500 · 2.4:1cyan-600 · 3.7:1cyan-700 · 5.4:1cyan-800 · 7.3:1cyan-900 · 9.1:1cyan-950 · 13.4:1
Sky — full scale
sky-50 · 1.1:1sky-100 · 1.1:1sky-200 · 1.3:1sky-300 · 1.7:1sky-400 · 2.1:1sky-500 · 2.8:1sky-600 · 4.1:1sky-700 · 5.9:1sky-800 · 7.6:1sky-900 · 9.5:1sky-950 · 13.9:1
Blue — full scale
blue-50 · 1.1:1blue-100 · 1.2:1blue-200 · 1.4:1blue-300 · 1.8:1blue-400 · 2.5:1blue-500 · 3.7:1blue-600 · 5.2:1blue-700 · 6.7:1blue-800 · 8.7:1blue-900 · 10.4:1blue-950 · 14.7:1
Indigo — full scale
indigo-50 · 1.1:1indigo-100 · 1.2:1indigo-200 · 1.5:1indigo-300 · 2.0:1indigo-400 · 3.0:1indigo-500 · 4.5:1indigo-600 · 6.3:1indigo-700 · 7.9:1indigo-800 · 9.9:1indigo-900 · 11.4:1indigo-950 · 16.0:1
Violet — full scale
violet-50 · 1.1:1violet-100 · 1.2:1violet-200 · 1.4:1violet-300 · 1.8:1violet-400 · 2.7:1violet-500 · 4.2:1violet-600 · 5.7:1violet-700 · 7.1:1violet-800 · 9.0:1violet-900 · 11.0:1violet-950 · 15.2:1
Purple — full scale
purple-50 · 1.1:1purple-100 · 1.2:1purple-200 · 1.4:1purple-300 · 1.8:1purple-400 · 2.6:1purple-500 · 4.0:1purple-600 · 5.4:1purple-700 · 7.0:1purple-800 · 8.7:1purple-900 · 10.9:1purple-950 · 15.0:1
Fuchsia — full scale
fuchsia-50 · 1.1:1fuchsia-100 · 1.2:1fuchsia-200 · 1.4:1fuchsia-300 · 1.8:1fuchsia-400 · 2.5:1fuchsia-500 · 3.5:1fuchsia-600 · 4.7:1fuchsia-700 · 6.3:1fuchsia-800 · 8.2:1fuchsia-900 · 10.0:1fuchsia-950 · 14.8:1
Pink — full scale
pink-50 · 1.1:1pink-100 · 1.2:1pink-200 · 1.4:1pink-300 · 1.8:1pink-400 · 2.6:1pink-500 · 3.5:1pink-600 · 4.6:1pink-700 · 6.0:1pink-800 · 7.9:1pink-900 · 9.6:1pink-950 · 15.0:1
Rose — full scale
rose-50 · 1.1:1rose-100 · 1.2:1rose-200 · 1.4:1rose-300 · 1.9:1rose-400 · 2.7:1rose-500 · 3.7:1rose-600 · 4.7:1rose-700 · 6.3:1rose-800 · 8.0:1rose-900 · 9.6:1rose-950 · 15.6:1
Check your own colours, not just Tailwind's
Paste a palette and get every pairing it implies — in light and dark, with a grade and one named fix.
Open ColorsMine