RecolorOpen Recolor

A vivid light cyan, black text passes AA

Tailwind teal-400

The hex code of Tailwind teal-400 is #00d5be (rgb(0 213 190)), from its Tailwind CSS 4.3.3 value oklch(77.7% 0.152 181.912). Black text on it reaches 11.26:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#00d5beteal-400
From the theme file of Tailwind CSS 4.3.3 (--color-teal-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(77.7% 0.152 181.912)
Hex#00d5be, the nearest color in sRGB
RGBrgb(0 213 190)
HSLhsl(174 100% 42%)
OKLCH of the hexoklch(78.3% 0.141 181.4)
CSS variablevar(--color-teal-400)
Nearest CSS namemediumturquoise #48d1cc, 0.034 away in OKLab
White text1.86:1: AA fails, AAA fails, large text fails
Black text11.26:1: AA passes, AAA passes, large text passes

About teal-400

Read as numbers, teal-400 is lightness 77.7%, chroma 0.152 and hue 181.9 degrees; read by eye, it is a vivid light cyan. Its neighbors on the teal scale are teal-300, 7.8 points lighter, and teal-500, 7.3 points darker.

Its HSL lightness, 42%, says little about how light teal-400 looks; OKLCH, made to match the eye, measures 77.7%, 36 points away. A hex code cannot hold teal-400 exactly: the value is outside sRGB, and #00d5be is the CSS Color 4 gamut mapping of it, chroma lowered by 0.011, 0.6 points of lightness and 0.5 degrees of hue away from the value.

Black on teal-400 reads at 11.26:1, enough for AAA body text; white reaches 1.86:1 and should stay off it. On the teal scale black text works down to teal-600, which leaves teal-400 2 shades of margin.

Of the named colors, mediumturquoise (#48d1cc) is the nearest, 0.034 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e3f9f4
  2. #c6f2e9
  3. #a7ebde
  4. #85e4d3
  5. #5cddc9
  6. #00d5be
  7. #00a794
  8. #007b6d
  9. #005148
  10. #002b26
  11. #000a08

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. #00d5be
  2. #006256
  3. #ffdad3
  4. #b750b0
  5. #00352d

Around teal-400 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #006256, #ffdad3, #b750b0, #00352d, drawn from a seed fixed by its hex. Open it in Recolor.

Using teal-400

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

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

Common questions

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

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

Is Tailwind teal-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-400: oklch(77.7% 0.152 181.912); #00d5be is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumturquoise (#48d1cc), 0.034 away in OKLab.

Sources