RecolorOpen Recolor

A vivid medium green, black text passes AA

Tailwind green-500

In Tailwind CSS 4.3.3, green-500 is defined as oklch(72.3% 0.219 149.579); as the nearest sRGB hex that is #00c951, or rgb(0 201 81). Black text on it reaches 9.47:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#00c951green-500
From the theme file of Tailwind CSS 4.3.3 (--color-green-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(72.3% 0.219 149.579)
Hex#00c951, the nearest color in sRGB
RGBrgb(0 201 81)
HSLhsl(144 100% 39%)
OKLCH of the hexoklch(72.9% 0.211 148.0)
CSS variablevar(--color-green-500)
Nearest CSS namelimegreen #32cd32, 0.029 away in OKLab
White text2.22:1: AA fails, AAA fails, large text fails
Black text9.47:1: AA passes, AAA passes, large text passes

About green-500

In OKLCH, green-500 has a lightness of 72.3%, a chroma of 0.219 and a hue of 149.6 degrees, which makes it a vivid medium green. The step up to green-400 is 6.9 points of lightness, and the step down to green-600 9.6 points.

HSL puts its lightness at 39% and OKLCH at 72.3%, 33 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Green-500 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #00c951, gives up 0.008 of chroma and moves 0.6 points of lightness and 1.6 degrees of hue; a Display P3 screen shows the full value.

For text, green-500 wants black: 9.47:1 clears even AAA's 7:1, and white at 2.22:1 fails AA. Black text passes on every green shade from green-50 to green-600, 1 shade darker than green-500.

Among the CSS keywords, limegreen (#32cd32) comes closest at 0.029 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #e1f7e3
  2. #c2efc7
  3. #a2e6ab
  4. #80dd8f
  5. #57d371
  6. #00c951
  7. #009d3e
  8. #00742b
  9. #004c1a
  10. #00280a
  11. #000901

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. #00c951
  2. #122117
  3. #7e977e
  4. #dbf6dd
  5. #4e6751

Locked as the first of five swatches, green-500 gets #122117, #7e977e, #dbf6dd, #4e6751 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using green-500

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

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

Common questions

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

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

Is Tailwind green-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-500: oklch(72.3% 0.219 149.579); #00c951 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources