RecolorOpen Recolor

A vivid medium green, white text passes AA

Tailwind emerald-700

In Tailwind CSS 4.3.3, emerald-700 is defined as oklch(50.8% 0.118 165.612); as the nearest sRGB hex that is #007a55, or rgb(0 122 85). White text on it reaches 5.36:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#007a55emerald-700
From the theme file of Tailwind CSS 4.3.3 (--color-emerald-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(50.8% 0.118 165.612)
Hex#007a55, the nearest color in sRGB
RGBrgb(0 122 85)
HSLhsl(162 100% 24%)
OKLCH of the hexoklch(51.3% 0.110 163.6)
CSS variablevar(--color-emerald-700)
Nearest CSS nameseagreen #2e8b57, 0.059 away in OKLab
White text5.36:1: AA passes, AAA fails, large text passes
Black text3.91:1: AA fails, AAA fails, large text passes

About emerald-700

In OKLCH, emerald-700 has a lightness of 50.8%, a chroma of 0.118 and a hue of 165.6 degrees, which makes it a vivid medium green. The step up to emerald-600 is 8.8 points of lightness, and the step down to emerald-800 7.6 points.

Its HSL lightness, 24%, says little about how light emerald-700 looks; OKLCH, made to match the eye, measures 50.8%, 27 points away. Emerald-700 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #007a55, gives up 0.008 of chroma and moves 0.5 points of lightness and 2.0 degrees of hue; a Display P3 screen shows the full value.

With white text, emerald-700 passes AA at 5.36:1. Black text, at 3.91:1, does not. Going down the emerald scale, white text first reaches AA here; one shade lighter, emerald-600 gives it 3.65:1.

No CSS keyword matches it; seagreen (#2e8b57) is the nearest, 0.059 away in OKLab, a clear step off.

Tints and shades

  1. #dae8e1
  2. #b5d2c3
  3. #90bba6
  4. #6ba58a
  5. #43906f
  6. #007a55
  7. #005e41
  8. #00442e
  9. #002b1c
  10. #00140b
  11. #000301

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. #007a55
  2. #50d5a8
  3. #401a2e
  4. #f8e7c4
  5. #a067cb

Locked as the first of five swatches, emerald-700 gets #50d5a8, #401a2e, #f8e7c4, #a067cb from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using emerald-700

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

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

Common questions

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

Yes. White text measures 5.36:1 on emerald-700, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind emerald-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-emerald-700: oklch(50.8% 0.118 165.612); #007a55 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources