RecolorOpen Recolor

A pale green, black text passes AA

Tailwind emerald-100

In Tailwind CSS 4.3.3, emerald-100 is defined as oklch(95% 0.052 163.051); in hex that is #d0fae5, or rgb(208 250 229). Black text on it reaches 18.49:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#d0fae5emerald-100
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95% 0.052 163.051)
Hex#d0fae5
RGBrgb(208 250 229)
HSLhsl(150 81% 90%)
CSS variablevar(--color-emerald-100)
Nearest CSS namelightcyan #e0ffff, 0.041 away in OKLab
White text1.14:1: AA fails, AAA fails, large text fails
Black text18.49:1: AA passes, AAA passes, large text passes

About emerald-100

In OKLCH, emerald-100 has a lightness of 95.0%, a chroma of 0.052 and a hue of 163.1 degrees, which makes it a pale green. The step up to emerald-50 is 2.9 points of lightness, and the step down to emerald-200 4.5 points.

Here HSL's lightness, 90%, lands near OKLCH's 95.0%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so emerald-100 converts to #d0fae5 without losing chroma.

For text, emerald-100 wants black: 18.49:1 clears even AAA's 7:1, and white at 1.14:1 fails AA. On the emerald scale black text works down to emerald-600, which leaves emerald-100 5 shades of margin.

Among the CSS keywords, lightcyan (#e0ffff) comes closest at 0.041 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #f7fefb
  2. #f0fdf6
  3. #e8fdf2
  4. #e0fcee
  5. #d8fbe9
  6. #d0fae5
  7. #a3c4b3
  8. #789184
  9. #4f6158
  10. #2a3530
  11. #0a0e0c

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. #d0fae5
  2. #538d73
  3. #3d1d33
  4. #f2a8d8
  5. #41584b

Locked as the first of five swatches, emerald-100 gets #538d73, #3d1d33, #f2a8d8, #41584b 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 emerald-100

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

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

Common questions

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

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

Is Tailwind emerald-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-100: oklch(95% 0.052 163.051); #d0fae5 is its conversion to sRGB.

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

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

Sources