RecolorOpen Recolor

A vivid medium cyan, black text passes AA

Tailwind teal-500

Tailwind teal-500 is oklch(70.4% 0.14 182.503) in Tailwind CSS 4.3.3, which is #00bba7 as the nearest sRGB hex and rgb(0 187 167). Black text on it reaches 8.67:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#00bba7teal-500
From the theme file of Tailwind CSS 4.3.3 (--color-teal-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.4% 0.14 182.503)
Hex#00bba7, the nearest color in sRGB
RGBrgb(0 187 167)
HSLhsl(174 100% 37%)
OKLCH of the hexoklch(71.0% 0.128 181.6)
CSS variablevar(--color-teal-500)
Nearest CSS namelightseagreen #20b2aa, 0.028 away in OKLab
White text2.42:1: AA fails, AAA fails, large text fails
Black text8.67:1: AA passes, AAA passes, large text passes

About teal-500

Tailwind teal-500 is a vivid medium cyan: OKLCH lightness 70.4%, chroma 0.140, hue 182.5 degrees. On Tailwind's teal scale it sits between teal-400 at 77.7% and teal-600 at 60.0%.

HSL puts its lightness at 37% and OKLCH at 70.4%, 34 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value lies outside sRGB, the colors a hex code can name: #00bba7 is what CSS Color 4's gamut mapping makes of it, chroma 0.128 instead of 0.140, moving 0.6 points of lightness and 0.9 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on teal-500 measures 8.67:1, past the 7:1 of WCAG AAA, while white text manages only 2.42:1. Black text passes on every teal shade from teal-50 to teal-600, 1 shade darker than teal-500.

The closest CSS named color is lightseagreen (#20b2aa), 0.028 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #e1f4f0
  2. #c1e9e1
  3. #a1ded2
  4. #7ed2c4
  5. #55c7b5
  6. #00bba7
  7. #009282
  8. #006b5f
  9. #00463e
  10. #002520
  11. #000806

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #00bba7
  2. #2a130d
  3. #a46a97
  4. #ecd2e8
  5. #006c65

Recolor's generator, with teal-500 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #2a130d, #a46a97, #ecd2e8, #006c65. Open it in Recolor.

Using teal-500

Pair it with text-black, 8.67:1; teal-500 as text on a black page measures the same ratio. In CSS it is var(--color-teal-500).

HTML
<a class="bg-teal-500 text-black" href="/start">Get started</a>
<p class="text-teal-500">Text in teal-500</p>

Common questions

Does white text pass WCAG AA on Tailwind teal-500?

No. White text measures 2.42:1 on teal-500, under AA's 4.5:1; black text measures 8.67:1 and passes. The lightest teal shade for white text is teal-700.

Is Tailwind teal-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-500: oklch(70.4% 0.14 182.503); #00bba7 is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind teal-500?

No. The nearest CSS named color is lightseagreen (#20b2aa), 0.028 away in OKLab.

Sources