RecolorOpen Recolor

A greenish white, black text passes AA

Tailwind green-50

The hex code of Tailwind green-50 is #f0fdf4 (rgb(240 253 244)), from its Tailwind CSS 4.3.3 value oklch(98.2% 0.018 155.826). Black text on it reaches 20.06:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f0fdf4green-50
From the theme file of Tailwind CSS 4.3.3 (--color-green-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.2% 0.018 155.826)
Hex#f0fdf4
RGBrgb(240 253 244)
HSLhsl(138 76% 97%)
CSS variablevar(--color-green-50)
Nearest CSS namehoneydew #f0fff0, 0.009 away in OKLab
White text1.05:1: AA fails, AAA fails, large text fails
Black text20.06:1: AA passes, AAA passes, large text passes

About green-50

Read as numbers, green-50 is lightness 98.2%, chroma 0.018 and hue 155.8 degrees; read by eye, it is a greenish white. As the first of the eleven green shades it sits closest to white, 1.8 points below it and 2.0 points above green-100.

Here HSL's lightness, 97%, lands near OKLCH's 98.2%, which is not true of every color. No gamut mapping is needed here: oklch(98.2% 0.018 155.826) sits inside sRGB and #f0fdf4 matches it.

Black on green-50 reads at 20.06:1, enough for AAA body text; white reaches 1.05:1 and should stay off it. On the green scale black text works down to green-600, which leaves green-50 6 shades of margin.

The CSS keyword honeydew (#f0fff0) is almost the same color: 0.009 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdfe
  2. #fffbfd
  3. #fffafc
  4. #fff8fb
  5. #f0fdf4
  6. #ccc0c3
  7. #978e90
  8. #655f60
  9. #373334
  10. #0f0d0e

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. #f0fdf4
  2. #5d92dc
  3. #2c1f09
  4. #9ec8ff
  5. #805700

Around green-50 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #5d92dc, #2c1f09, #9ec8ff, #805700, drawn from a seed fixed by its hex. Open it in Recolor.

Using green-50

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

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

Common questions

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

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

Is Tailwind green-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-50: oklch(98.2% 0.018 155.826); #f0fdf4 is its conversion to sRGB.

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

Yes, nearly: honeydew (#f0fff0) is 0.009 away in OKLab, too close to tell apart by eye.

Sources