RecolorOpen Recolor

A cool white, black text passes AA

Tailwind teal-50

In Tailwind CSS 4.3.3, teal-50 is defined as oklch(98.4% 0.014 180.72); in hex that is #f0fdfa, or rgb(240 253 250). Black text on it reaches 20.14:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f0fdfateal-50
From the theme file of Tailwind CSS 4.3.3 (--color-teal-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.4% 0.014 180.72)
Hex#f0fdfa
RGBrgb(240 253 250)
HSLhsl(166 76% 97%)
CSS variablevar(--color-teal-50)
Nearest CSS nameazure #f0ffff, 0.007 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.14:1: AA passes, AAA passes, large text passes

About teal-50

In OKLCH, teal-50 has a lightness of 98.4%, a chroma of 0.014 and a hue of 180.7 degrees, which makes it a cool white. As the first of the eleven teal shades it sits closest to white, 1.6 points below it and 3.1 points above teal-100.

Here HSL's lightness, 97%, lands near OKLCH's 98.4%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so teal-50 converts to #f0fdfa without losing chroma.

For text, teal-50 wants black: 20.14:1 clears even AAA's 7:1, and white at 1.04:1 fails AA. On the teal scale black text works down to teal-600, which leaves teal-50 6 shades of margin.

The CSS keyword azure (#f0ffff) is almost the same color: 0.007 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffefe
  2. #fffcfd
  3. #fffafc
  4. #fff9fb
  5. #f0fdfa
  6. #cbc1c3
  7. #968f90
  8. #655f61
  9. #373435
  10. #0f0e0e

From light to dark: 4 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. #f0fdfa
  2. #7a4425
  3. #76cefb
  4. #152229
  5. #c27951

Locked as the first of five swatches, teal-50 gets #7a4425, #76cefb, #152229, #c27951 from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using teal-50

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

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

Common questions

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

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

Is Tailwind teal-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-50: oklch(98.4% 0.014 180.72); #f0fdfa is its conversion to sRGB.

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

Yes, nearly: azure (#f0ffff) is 0.007 away in OKLab, too close to tell apart by eye.

Sources