RecolorOpen Recolor

A greenish white, black text passes AA

Tailwind emerald-50

Tailwind emerald-50 is oklch(97.9% 0.021 166.113) in Tailwind CSS 4.3.3, which is #ecfdf5 in hex and rgb(236 253 245). Black text on it reaches 19.94:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ecfdf5emerald-50
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.9% 0.021 166.113)
Hex#ecfdf5
RGBrgb(236 253 245)
HSLhsl(152 81% 96%)
CSS variablevar(--color-emerald-50)
Nearest CSS namehoneydew #f0fff0, 0.011 away in OKLab
White text1.05:1: AA fails, AAA fails, large text fails
Black text19.94:1: AA passes, AAA passes, large text passes

About emerald-50

Tailwind emerald-50 is a greenish white: OKLCH lightness 97.9%, chroma 0.021, hue 166.1 degrees. It opens the emerald scale as its lightest shade, 2.9 points of lightness above emerald-100.

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

Black text on emerald-50 measures 19.94:1, past the 7:1 of WCAG AAA, while white text manages only 1.05:1. Black text passes on every emerald shade from emerald-50 to emerald-600, 6 shades darker than emerald-50.

Its nearest CSS named color, honeydew (#f0fff0), is 0.011 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fcfffd
  2. #f9fefc
  3. #f6fefa
  4. #f2fef8
  5. #effdf7
  6. #ecfdf5
  7. #b9c7c0
  8. #89938e
  9. #5b625f
  10. #313634
  11. #0d0e0e

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. #ecfdf5
  2. #71436a
  3. #93d2c8
  4. #2b1527
  5. #a8725d

Recolor's generator, with emerald-50 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #71436a, #93d2c8, #2b1527, #a8725d. Open it in Recolor.

Using emerald-50

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

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

Common questions

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

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

Is Tailwind emerald-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-50: oklch(97.9% 0.021 166.113); #ecfdf5 is its conversion to sRGB.

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

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

Sources