RecolorOpen Recolor

A vivid light green, black text passes AA

Tailwind emerald-300

Tailwind emerald-300 is oklch(84.5% 0.143 164.978) in Tailwind CSS 4.3.3, which is #5ee9b5 in hex and rgb(94 233 181). Black text on it reaches 13.80:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#5ee9b5emerald-300
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(84.5% 0.143 164.978)
Hex#5ee9b5
RGBrgb(94 233 181)
HSLhsl(158 76% 64%)
CSS variablevar(--color-emerald-300)
Nearest CSS nameturquoise #40e0d0, 0.053 away in OKLab
White text1.52:1: AA fails, AAA fails, large text fails
Black text13.80:1: AA passes, AAA passes, large text passes

About emerald-300

Tailwind emerald-300 is a vivid light green: OKLCH lightness 84.5%, chroma 0.143, hue 165.0 degrees. On Tailwind's emerald scale it sits between emerald-200 at 90.5% and emerald-400 at 76.5%.

Its HSL lightness, 64%, says little about how light emerald-300 looks; OKLCH, made to match the eye, measures 84.5%, 20 points away. Its value fits inside sRGB, so #5ee9b5 is the same color, not an approximation.

Black text on emerald-300 measures 13.80:1, past the 7:1 of WCAG AAA, while white text manages only 1.52:1. On the emerald scale black text works down to emerald-600, which leaves emerald-300 3 shades of margin.

No CSS keyword matches it; turquoise (#40e0d0) is the nearest, 0.053 away in OKLab, a clear step off.

Tints and shades

  1. #e9fcf3
  2. #d1f9e6
  3. #b9f5da
  4. #9ff1cd
  5. #82edc1
  6. #5ee9b5
  7. #48b78d
  8. #338767
  9. #1f5a44
  10. #0d3123
  11. #020c07

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. #5ee9b5
  2. #20181c
  3. #b4669a
  4. #b9e7d0
  5. #005b44

Recolor's generator, with emerald-300 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #20181c, #b4669a, #b9e7d0, #005b44. Open it in Recolor.

Using emerald-300

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

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

Common questions

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

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

Is Tailwind emerald-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-300: oklch(84.5% 0.143 164.978); #5ee9b5 is its conversion to sRGB.

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

No. The nearest CSS named color is turquoise (#40e0d0), 0.053 away in OKLab.

Sources