RecolorOpen Recolor

A vivid medium green, black text passes AA

Tailwind emerald-500

The hex code of Tailwind emerald-500 is #00bc7d (rgb(0 188 125)), from its Tailwind CSS 4.3.3 value oklch(69.6% 0.17 162.48). Black text on it reaches 8.49:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#00bc7demerald-500
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(69.6% 0.17 162.48)
Hex#00bc7d, the nearest color in sRGB
RGBrgb(0 188 125)
HSLhsl(160 100% 37%)
OKLCH of the hexoklch(70.2% 0.158 160.4)
CSS variablevar(--color-emerald-500)
Nearest CSS namemediumseagreen #3cb371, 0.027 away in OKLab
White text2.47:1: AA fails, AAA fails, large text fails
Black text8.49:1: AA passes, AAA passes, large text passes

About emerald-500

Read as numbers, emerald-500 is lightness 69.6%, chroma 0.170 and hue 162.5 degrees; read by eye, it is a vivid medium green. Its neighbors on the emerald scale are emerald-400, 6.9 points lighter, and emerald-600, 10.0 points darker.

Its HSL lightness, 37%, says little about how light emerald-500 looks; OKLCH, made to match the eye, measures 69.6%, 33 points away. A hex code cannot hold emerald-500 exactly: the value is outside sRGB, and #00bc7d is the CSS Color 4 gamut mapping of it, chroma lowered by 0.012, 0.6 points of lightness and 2.0 degrees of hue away from the value.

Black on emerald-500 reads at 8.49:1, enough for AAA body text; white reaches 2.47:1 and should stay off it. On the emerald scale black text works down to emerald-600, which leaves emerald-500 1 shade of margin.

Of the named colors, mediumseagreen (#3cb371) is the nearest, 0.027 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #e0f4e9
  2. #c1ead3
  3. #a0dfbd
  4. #7ed3a7
  5. #55c892
  6. #00bc7d
  7. #009361
  8. #006c46
  9. #00472c
  10. #002515
  11. #000803

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. #00bc7d
  2. #202348
  3. #b3b7ff
  4. #6e5149
  5. #c1efd7

Around emerald-500 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #202348, #b3b7ff, #6e5149, #c1efd7, drawn from a seed fixed by its hex. Open it in Recolor.

Using emerald-500

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

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

Common questions

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

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

Is Tailwind emerald-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-500: oklch(69.6% 0.17 162.48); #00bc7d is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumseagreen (#3cb371), 0.027 away in OKLab.

Sources