RecolorOpen Recolor

A pale cyan, black text passes AA

Tailwind teal-100

The hex code of Tailwind teal-100 is #cbfbf1 (rgb(203 251 241)), from its Tailwind CSS 4.3.3 value oklch(95.3% 0.051 180.801). Black text on it reaches 18.61:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#cbfbf1teal-100
From the theme file of Tailwind CSS 4.3.3 (--color-teal-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95.3% 0.051 180.801)
Hex#cbfbf1
RGBrgb(203 251 241)
HSLhsl(168 86% 89%)
CSS variablevar(--color-teal-100)
Nearest CSS namelightcyan #e0ffff, 0.034 away in OKLab
White text1.13:1: AA fails, AAA fails, large text fails
Black text18.61:1: AA passes, AAA passes, large text passes

About teal-100

Read as numbers, teal-100 is lightness 95.3%, chroma 0.051 and hue 180.8 degrees; read by eye, it is a pale cyan. Its neighbors on the teal scale are teal-50, 3.1 points lighter, and teal-200, 4.3 points darker.

HSL calls its lightness 89%, OKLCH 95.3%: 6 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(95.3% 0.051 180.801) sits inside sRGB and #cbfbf1 matches it.

Black on teal-100 reads at 18.61:1, enough for AAA body text; white reaches 1.13:1 and should stay off it. Black text passes on every teal shade from teal-50 to teal-600, 5 shades darker than teal-100.

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

Tints and shades

  1. #f7fefd
  2. #eefefa
  3. #e6fdf8
  4. #ddfcf6
  5. #d4fcf3
  6. #cbfbf1
  7. #9fc5bd
  8. #75928c
  9. #4d615d
  10. #293533
  11. #090e0d

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. #cbfbf1
  2. #2d685c
  3. #e8a495
  4. #0b2724
  5. #c271ae

Around teal-100 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #2d685c, #e8a495, #0b2724, #c271ae, drawn from a seed fixed by its hex. Open it in Recolor.

Using teal-100

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

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

Common questions

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

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

Is Tailwind teal-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-100: oklch(95.3% 0.051 180.801); #cbfbf1 is its conversion to sRGB.

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

No. The nearest CSS named color is lightcyan (#e0ffff), 0.034 away in OKLab.

Sources