RecolorOpen Recolor

A vivid dark green, white text passes AA

Tailwind emerald-800

The hex code of Tailwind emerald-800 is #006045 (rgb(0 96 69)), from its Tailwind CSS 4.3.3 value oklch(43.2% 0.095 166.913). White text on it reaches 7.61:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#006045emerald-800
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(43.2% 0.095 166.913)
Hex#006045, the nearest color in sRGB
RGBrgb(0 96 69)
HSLhsl(163 100% 19%)
OKLCH of the hexoklch(43.4% 0.090 165.9)
CSS variablevar(--color-emerald-800)
Nearest CSS namedarkslategray #2f4f4f, 0.068 away in OKLab
White text7.61:1: AA passes, AAA passes, large text passes
Black text2.76:1: AA fails, AAA fails, large text fails

About emerald-800

Read as numbers, emerald-800 is lightness 43.2%, chroma 0.095 and hue 166.9 degrees; read by eye, it is a vivid dark green. Its neighbors on the emerald scale are emerald-700, 7.6 points lighter, and emerald-900, 5.4 points darker.

HSL puts its lightness at 19% and OKLCH at 43.2%, 24 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold emerald-800 exactly: the value is outside sRGB, and #006045 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.005, 0.2 points of lightness and 1.0 degrees of hue away from the value.

White on emerald-800 reads at 7.61:1, enough for AAA body text; black reaches 2.76:1 and should stay off it. White text passes on every emerald shade from emerald-700 down, so emerald-800 is 1 shade past the line.

The nearest CSS named color, darkslategray (#2f4f4f), is 0.068 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d7e3dd
  2. #b0c8bd
  3. #8aad9d
  4. #63937e
  5. #3c7961
  6. #006045
  7. #004a34
  8. #003424
  9. #002015
  10. #000e07
  11. #000201

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. #006045
  2. #c8f7d5
  3. #2ca673
  4. #002d28
  5. #6acdda

Around emerald-800 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #c8f7d5, #2ca673, #002d28, #6acdda, drawn from a seed fixed by its hex. Open it in Recolor.

Using emerald-800

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

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

Common questions

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

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

Is Tailwind emerald-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-800: oklch(43.2% 0.095 166.913); #006045 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources