RecolorOpen Recolor

A vivid dark green, white text passes AA

Tailwind emerald-900

Tailwind emerald-900 is oklch(37.8% 0.077 168.94) in Tailwind CSS 4.3.3, which is #004f3b as the nearest sRGB hex and rgb(0 79 59). White text on it reaches 9.63:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#004f3bemerald-900
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(37.8% 0.077 168.94)
Hex#004f3b, the nearest color in sRGB
RGBrgb(0 79 59)
HSLhsl(165 100% 15%)
OKLCH of the hexoklch(38.0% 0.076 168.7)
CSS variablevar(--color-emerald-900)
Nearest CSS namedarkslategray #2f4f4f, 0.051 away in OKLab
White text9.63:1: AA passes, AAA passes, large text passes
Black text2.18:1: AA fails, AAA fails, large text fails

About emerald-900

Tailwind emerald-900 is a vivid dark green: OKLCH lightness 37.8%, chroma 0.077, hue 168.9 degrees. On Tailwind's emerald scale it sits between emerald-800 at 43.2% and emerald-950 at 26.2%.

Its HSL lightness, 15%, says little about how light emerald-900 looks; OKLCH, made to match the eye, measures 37.8%, 22 points away. Its value lies outside sRGB, the colors a hex code can name: #004f3b is what CSS Color 4's gamut mapping makes of it, chroma 0.076 instead of 0.077, moving 0.2 points of lightness and 0.2 degrees of hue. A wide-gamut screen shows the stronger original.

White text on emerald-900 measures 9.63:1, past the 7:1 of WCAG AAA, while black text manages only 2.18:1. On the emerald scale white text works from emerald-700 to emerald-950; emerald-900 has 2 shades of margin.

No CSS keyword matches it; darkslategray (#2f4f4f) is the nearest, 0.051 away in OKLab, a clear step off.

Tints and shades

  1. #d5e0db
  2. #adc1b9
  3. #85a397
  4. #5e8677
  5. #376a58
  6. #004f3b
  7. #003c2c
  8. #002a1e
  9. #001911
  10. #000a05
  11. #000101

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. #004f3b
  2. #71e2b2
  3. #12211b
  4. #00a67e
  5. #baffe3

Recolor's generator, with emerald-900 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #71e2b2, #12211b, #00a67e, #baffe3. Open it in Recolor.

Using emerald-900

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

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

Common questions

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

Yes. White text measures 9.63:1 on emerald-900, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind emerald-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-900: oklch(37.8% 0.077 168.94); #004f3b is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is darkslategray (#2f4f4f), 0.051 away in OKLab.

Sources