RecolorOpen Recolor

A vivid medium green, white text passes AA

Tailwind green-700

Tailwind green-700 is oklch(52.7% 0.154 150.069) in Tailwind CSS 4.3.3, which is #008236 as the nearest sRGB hex and rgb(0 130 54). White text on it reaches 4.95:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#008236green-700
From the theme file of Tailwind CSS 4.3.3 (--color-green-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(52.7% 0.154 150.069)
Hex#008236, the nearest color in sRGB
RGBrgb(0 130 54)
HSLhsl(145 100% 25%)
OKLCH of the hexoklch(53.0% 0.149 149.0)
CSS variablevar(--color-green-700)
Nearest CSS namegreen #008000, 0.034 away in OKLab
White text4.95:1: AA passes, AAA fails, large text passes
Black text4.25:1: AA fails, AAA fails, large text passes

About green-700

Tailwind green-700 is a vivid medium green: OKLCH lightness 52.7%, chroma 0.154, hue 150.1 degrees. On Tailwind's green scale it sits between green-600 at 62.7% and green-800 at 44.8%.

HSL puts its lightness at 25% and OKLCH at 52.7%, 27 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: #008236 is what CSS Color 4's gamut mapping makes of it, chroma 0.149 instead of 0.154, moving 0.3 points of lightness and 1.1 degrees of hue. A wide-gamut screen shows the stronger original.

White text on green-700 reaches 4.95:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.25:1. It is the lightest green shade that carries white body text; green-600 falls short at 3.22:1.

The closest CSS named color is green (#008000), 0.034 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #daeadc
  2. #b6d5ba
  3. #92c099
  4. #6dac78
  5. #459757
  6. #008236
  7. #006528
  8. #00491b
  9. #002f0f
  10. #001605
  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. #008236
  2. #f2d8f1
  3. #569162
  4. #1a271a
  5. #a3d8aa

Recolor's generator, with green-700 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #f2d8f1, #569162, #1a271a, #a3d8aa. Open it in Recolor.

Using green-700

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

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

Common questions

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

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

Is Tailwind green-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-green-700: oklch(52.7% 0.154 150.069); #008236 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is green (#008000), 0.034 away in OKLab.

Sources