RecolorOpen Recolor

A vivid medium green, black text passes AA

Tailwind emerald-600

Tailwind emerald-600 is oklch(59.6% 0.145 163.225) in Tailwind CSS 4.3.3, which is #009966 as the nearest sRGB hex and rgb(0 153 102). Black text on it reaches 5.75:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#009966emerald-600
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(59.6% 0.145 163.225)
Hex#009966, the nearest color in sRGB
RGBrgb(0 153 102)
HSLhsl(160 100% 30%)
OKLCH of the hexoklch(60.3% 0.134 160.9)
CSS variablevar(--color-emerald-600)
Nearest CSS nameseagreen #2e8b57, 0.040 away in OKLab
White text3.65:1: AA fails, AAA fails, large text passes
Black text5.75:1: AA passes, AAA fails, large text passes

About emerald-600

Tailwind emerald-600 is a vivid medium green: OKLCH lightness 59.6%, chroma 0.145, hue 163.2 degrees. On Tailwind's emerald scale it sits between emerald-500 at 69.6% and emerald-700 at 50.8%.

HSL puts its lightness at 30% and OKLCH at 59.6%, 30 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value lies outside sRGB, the colors a hex code can name: #009966 is what CSS Color 4's gamut mapping makes of it, chroma 0.134 instead of 0.145, moving 0.7 points of lightness and 2.3 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on emerald-600 reaches 5.75:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 3.65:1. It is the darkest emerald shade that still carries black body text; emerald-700 drops to 3.91:1.

The closest CSS named color is seagreen (#2e8b57), 0.040 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #ddeee4
  2. #bbddca
  3. #98ccb0
  4. #74bb97
  5. #4caa7e
  6. #009966
  7. #00774e
  8. #005738
  9. #003823
  10. #001c0f
  11. #000502

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. #009966
  2. #192d20
  3. #dfbbc1
  4. #005d37
  5. #edcdff

Recolor's generator, with emerald-600 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #192d20, #dfbbc1, #005d37, #edcdff. Open it in Recolor.

Using emerald-600

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

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

Common questions

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

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

Is Tailwind emerald-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-600: oklch(59.6% 0.145 163.225); #009966 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is seagreen (#2e8b57), 0.040 away in OKLab.

Sources