RecolorOpen Recolor

A vivid light green, black text passes AA

Tailwind emerald-400

In Tailwind CSS 4.3.3, emerald-400 is defined as oklch(76.5% 0.177 163.223); as the nearest sRGB hex that is #00d492, or rgb(0 212 146). Black text on it reaches 10.83:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#00d492emerald-400
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(76.5% 0.177 163.223)
Hex#00d492, the nearest color in sRGB
RGBrgb(0 212 146)
HSLhsl(161 100% 42%)
OKLCH of the hexoklch(76.9% 0.169 161.9)
CSS variablevar(--color-emerald-400)
Nearest CSS namemediumaquamarine #66cdaa, 0.062 away in OKLab
White text1.94:1: AA fails, AAA fails, large text fails
Black text10.83:1: AA passes, AAA passes, large text passes

About emerald-400

In OKLCH, emerald-400 has a lightness of 76.5%, a chroma of 0.177 and a hue of 163.2 degrees, which makes it a vivid light green. The step up to emerald-300 is 8.0 points of lightness, and the step down to emerald-500 6.9 points.

HSL puts its lightness at 42% and OKLCH at 76.5%, 35 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Emerald-400 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #00d492, gives up 0.008 of chroma and moves 0.4 points of lightness and 1.3 degrees of hue; a Display P3 screen shows the full value.

For text, emerald-400 wants black: 10.83:1 clears even AAA's 7:1, and white at 1.94:1 fails AA. Black text passes on every emerald shade from emerald-50 to emerald-600, 2 shades darker than emerald-400.

The nearest CSS named color, mediumaquamarine (#66cdaa), is 0.062 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #e3f9ed
  2. #c5f2da
  3. #a6ebc8
  4. #84e4b6
  5. #5bdca4
  6. #00d492
  7. #00a671
  8. #007a52
  9. #005135
  10. #002b1b
  11. #000a04

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. #00d492
  2. #175a40
  3. #c4ecd9
  4. #371f2d
  5. #69947a

Locked as the first of five swatches, emerald-400 gets #175a40, #c4ecd9, #371f2d, #69947a 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-400

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

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

Common questions

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

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

Is Tailwind emerald-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-400: oklch(76.5% 0.177 163.223); #00d492 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumaquamarine (#66cdaa), 0.062 away in OKLab.

Sources