RecolorOpen Recolor

A vivid light cyan, black text passes AA

Tailwind teal-300

In Tailwind CSS 4.3.3, teal-300 is defined as oklch(85.5% 0.138 181.071); in hex that is #46ecd5, or rgb(70 236 213). Black text on it reaches 14.22:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#46ecd5teal-300
From the theme file of Tailwind CSS 4.3.3 (--color-teal-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(85.5% 0.138 181.071)
Hex#46ecd5
RGBrgb(70 236 213)
HSLhsl(172 81% 60%)
CSS variablevar(--color-teal-300)
Nearest CSS nameturquoise #40e0d0, 0.033 away in OKLab
White text1.48:1: AA fails, AAA fails, large text fails
Black text14.22:1: AA passes, AAA passes, large text passes

About teal-300

In OKLCH, teal-300 has a lightness of 85.5%, a chroma of 0.138 and a hue of 181.1 degrees, which makes it a vivid light cyan. The step up to teal-200 is 5.5 points of lightness, and the step down to teal-400 7.8 points.

HSL puts its lightness at 60% and OKLCH at 85.5%, 25 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The value lies inside sRGB, the gamut of a hex code, so teal-300 converts to #46ecd5 without losing chroma.

For text, teal-300 wants black: 14.22:1 clears even AAA's 7:1, and white at 1.48:1 fails AA. Black text passes on every teal shade from teal-50 to teal-600, 3 shades darker than teal-300.

Among the CSS keywords, turquoise (#40e0d0) comes closest at 0.033 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e7fcf8
  2. #cefaf1
  3. #b4f7ea
  4. #97f3e3
  5. #75f0dc
  6. #46ecd5
  7. #35b9a7
  8. #25897b
  9. #155b51
  10. #07312b
  11. #010d0a

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. #46ecd5
  2. #361c31
  3. #4a8f80
  4. #c1fdf5
  5. #633e5e

Locked as the first of five swatches, teal-300 gets #361c31, #4a8f80, #c1fdf5, #633e5e from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using teal-300

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

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

Common questions

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

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

Is Tailwind teal-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-300: oklch(85.5% 0.138 181.071); #46ecd5 is its conversion to sRGB.

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

No. The nearest CSS named color is turquoise (#40e0d0), 0.033 away in OKLab.

Sources