RecolorOpen Recolor

Eleven shades, from indigo-50 to indigo-950

Tailwind indigo colors

Tailwind CSS 4.3.3 defines eleven indigo shades in OKLCH, from indigo-50 (#eef2ff) to indigo-950 (#1e1a4d). On them white text passes WCAG AA from indigo-500 to indigo-950, and black text from indigo-50 to indigo-500. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#eef2ff
  2. 100#e0e7ff
  3. 200#c6d2ff
  4. 300#a3b3ff
  5. 400#7c86ff
  6. 500#615fff
  7. 600#4f39f6
  8. 700#432dd7
  9. 800#372aac
  10. 900#312c85
  11. 950#1e1a4d
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
indigo-50oklch(96.2% 0.018 272.314)#eef2ff1.12:1 fails18.78:1 passes
indigo-100oklch(93% 0.034 272.788)#e0e7ff1.23:1 fails17.04:1 passes
indigo-200oklch(87% 0.065 274.039)#c6d2ff1.49:1 fails14.06:1 passes
indigo-300oklch(78.5% 0.115 274.713)#a3b3ff2.01:1 fails10.45:1 passes
indigo-400oklch(67.3% 0.182 276.935)#7c86ff3.13:1 fails6.71:1 passes
indigo-500oklch(58.5% 0.233 277.117)#615fff4.58:1 passes4.59:1 passes
indigo-600oklch(51.1% 0.262 276.966)#4f39f66.46:1 passes3.25:1 fails
indigo-700oklch(45.7% 0.24 277.023)#432dd78.09:1 passes2.60:1 fails
indigo-800oklch(39.8% 0.195 277.366)#372aac10.05:1 passes2.09:1 fails
indigo-900oklch(35.9% 0.144 278.697)#312c8511.48:1 passes1.83:1 fails
indigo-950oklch(25.7% 0.09 281.288)#1e1a4d16.03:1 passes1.31:1 fails

Text on indigo, and indigo as text

For indigo text the same lines hold in reverse: on white, use indigo-500 or darker; on black, indigo-500 or lighter. Contrast does not care which color sits behind.

The most colorful shade is indigo-600, chroma 0.262; the hue moves 9.0 degrees between indigo-50 and indigo-950.

Of the eleven values, 6 reach beyond sRGB; for those the hex is a gamut-mapped stand-in with less chroma.

Sources