A vivid medium yellow-green, white text passes AA

Tailwind lime-700

The hex code of Tailwind lime-700 is #497d00 (rgb(73 125 0)), from its Tailwind CSS 4.3.3 value oklch(53.2% 0.157 131.589). White text on it reaches 4.98:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#497d00lime-700
From the theme file of Tailwind CSS 4.3.3 (--color-lime-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(53.2% 0.157 131.589)
Hex#497d00, the nearest color in sRGB
RGBrgb(73 125 0)
HSLhsl(85 100% 25%)
OKLCH of the hexoklch(53.2% 0.149 132.4)
CSS variablevar(--color-lime-700)
Nearest CSS namegreen #008000, 0.042 away in OKLab
White text4.98:1: AA passes, AAA fails, large text passes
Black text4.22:1: AA fails, AAA fails, large text passes

About lime-700

Read as numbers, lime-700 is lightness 53.2%, chroma 0.157 and hue 131.6 degrees; read by eye, it is a vivid medium yellow-green. Its neighbors on the lime scale are lime-600, 11.6 points lighter, and lime-800, 7.9 points darker.

Its HSL lightness, 25%, says little about how light lime-700 looks; OKLCH, made to match the eye, measures 53.2%, 29 points away. A hex code cannot hold lime-700 exactly: the value is outside sRGB, and #497d00 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.008, 0.0 points of lightness and 0.8 degrees of hue away from the value.

White is the ink for lime-700: 4.98:1 passes AA for body text, where black stops at 4.22:1. Going down the lime scale, white text first reaches AA here; one shade lighter, lime-600 gives it 3.06:1.

Of the named colors, green (#008000) is the nearest, 0.042 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #dfe9d8
  2. #c0d3b2
  3. #a1be8d
  4. #83a867
  5. #66923f
  6. #497d00
  7. #376100
  8. #264600
  9. #172c00
  10. #081500
  11. #010300

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. #497d00
  2. #dcf4c8
  3. #6f9861
  4. #1d2b16
  5. #aac694

Around lime-700 as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #dcf4c8, #6f9861, #1d2b16, #aac694, drawn from a seed fixed by its hex. Open it in Recolor.

Using lime-700

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

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

Common questions

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

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

Is Tailwind lime-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-700: oklch(53.2% 0.157 131.589); #497d00 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources