RecolorOpen Recolor

A pale green, black text passes AA

Tailwind green-100

Tailwind green-100 is oklch(96.2% 0.044 156.743) in Tailwind CSS 4.3.3, which is #dcfce7 in hex and rgb(220 252 231). Black text on it reaches 19.12:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#dcfce7green-100
From the theme file of Tailwind CSS 4.3.3 (--color-green-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.2% 0.044 156.743)
Hex#dcfce7
RGBrgb(220 252 231)
HSLhsl(141 84% 93%)
CSS variablevar(--color-green-100)
Nearest CSS namehoneydew #f0fff0, 0.030 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.12:1: AA passes, AAA passes, large text passes

About green-100

Tailwind green-100 is a pale green: OKLCH lightness 96.2%, chroma 0.044, hue 156.7 degrees. On Tailwind's green scale it sits between green-50 at 98.2% and green-200 at 92.5%.

HSL and OKLCH agree on how light it is, 93% and 96.2%. Its value fits inside sRGB, so #dcfce7 is the same color, not an approximation.

Black text on green-100 measures 19.12:1, past the 7:1 of WCAG AAA, while white text manages only 1.10:1. Black text passes on every green shade from green-50 to green-600, 5 shades darker than green-100.

The closest CSS named color is honeydew (#f0fff0), 0.030 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #f9fffb
  2. #f4fef7
  3. #eefef3
  4. #e8fdef
  5. #e2fdeb
  6. #dcfce7
  7. #acc6b5
  8. #7f9286
  9. #546259
  10. #2d3530
  11. #0b0e0c

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. #dcfce7
  2. #545397
  3. #94c3a4
  4. #072618
  5. #d27362

Recolor's generator, with green-100 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #545397, #94c3a4, #072618, #d27362. Open it in Recolor.

Using green-100

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

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

Common questions

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

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

Is Tailwind green-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-100: oklch(96.2% 0.044 156.743); #dcfce7 is its conversion to sRGB.

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

No. The nearest CSS named color is honeydew (#f0fff0), 0.030 away in OKLab.

Sources