RecolorOpen Recolor

Eleven shades, from teal-50 to teal-950

Tailwind teal colors

Tailwind CSS 4.3.3 defines eleven teal shades in OKLCH, from teal-50 (#f0fdfa) to teal-950 (#022f2e). On them white text passes WCAG AA from teal-700 to teal-950, and black text from teal-50 to teal-600. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#f0fdfa
  2. 100#cbfbf1
  3. 200#96f7e4
  4. 300#46ecd5
  5. 400#00d5be
  6. 500#00bba7
  7. 600#009689
  8. 700#00786f
  9. 800#005f5a
  10. 900#0b4f4a
  11. 950#022f2e
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
teal-50oklch(98.4% 0.014 180.72)#f0fdfa1.04:1 fails20.14:1 passes
teal-100oklch(95.3% 0.051 180.801)#cbfbf11.13:1 fails18.61:1 passes
teal-200oklch(91% 0.096 180.426)#96f7e41.26:1 fails16.72:1 passes
teal-300oklch(85.5% 0.138 181.071)#46ecd51.48:1 fails14.22:1 passes
teal-400oklch(77.7% 0.152 181.912)#00d5be1.86:1 fails11.26:1 passes
teal-500oklch(70.4% 0.14 182.503)#00bba72.42:1 fails8.67:1 passes
teal-600oklch(60% 0.118 184.704)#0096893.67:1 fails5.72:1 passes
teal-700oklch(51.1% 0.096 186.391)#00786f5.36:1 passes3.92:1 fails
teal-800oklch(43.7% 0.078 188.216)#005f5a7.54:1 passes2.78:1 fails
teal-900oklch(38.6% 0.063 188.416)#0b4f4a9.41:1 passes2.23:1 fails
teal-950oklch(27.7% 0.046 192.524)#022f2e14.50:1 passes1.45:1 fails

Text on teal, and teal as text

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

The most colorful shade is teal-400, chroma 0.152; the hue moves 12.1 degrees between teal-50 and teal-950.

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

Sources