RecolorOpen Recolor

A vivid light green, black text passes AA

Tailwind green-400

Tailwind green-400 is oklch(79.2% 0.209 151.711) in Tailwind CSS 4.3.3, which is #05df72 in hex and rgb(5 223 114). Black text on it reaches 11.80:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#05df72green-400
From the theme file of Tailwind CSS 4.3.3 (--color-green-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(79.2% 0.209 151.711)
Hex#05df72
RGBrgb(5 223 114)
HSLhsl(150 96% 45%)
CSS variablevar(--color-green-400)
Nearest CSS namelimegreen #32cd32, 0.063 away in OKLab
White text1.78:1: AA fails, AAA fails, large text fails
Black text11.80:1: AA passes, AAA passes, large text passes

About green-400

Tailwind green-400 is a vivid light green: OKLCH lightness 79.2%, chroma 0.209, hue 151.7 degrees. On Tailwind's green scale it sits between green-300 at 87.1% and green-500 at 72.3%.

Its HSL lightness, 45%, says little about how light green-400 looks; OKLCH, made to match the eye, measures 79.2%, 34 points away. Its value fits inside sRGB, so #05df72 is the same color, not an approximation.

Black text on green-400 measures 11.80:1, past the 7:1 of WCAG AAA, while white text manages only 1.78:1. On the green scale black text works down to green-600, which leaves green-400 2 shades of margin.

No CSS keyword matches it; limegreen (#32cd32) is the nearest, 0.063 away in OKLab, a clear step off.

Tints and shades

  1. #e3fbe8
  2. #c7f6d1
  3. #a8f1ba
  4. #86eba3
  5. #5de58b
  6. #05df72
  7. #03af58
  8. #01813f
  9. #015628
  10. #002e12
  11. #000b03

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. #05df72
  2. #00702b
  3. #ffd2fb
  4. #00a03e
  5. #003513

Recolor's generator, with green-400 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #00702b, #ffd2fb, #00a03e, #003513. Open it in Recolor.

Using green-400

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

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

Common questions

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

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

Is Tailwind green-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-400: oklch(79.2% 0.209 151.711); #05df72 is its conversion to sRGB.

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

No. The nearest CSS named color is limegreen (#32cd32), 0.063 away in OKLab.

Sources