RecolorOpen Recolor

A vivid light yellow-green, black text passes AA

Tailwind lime-500

Tailwind lime-500 is oklch(76.8% 0.233 130.85) in Tailwind CSS 4.3.3, which is #7ccf00 as the nearest sRGB hex and rgb(124 207 0). Black text on it reaches 10.78:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#7ccf00lime-500
From the theme file of Tailwind CSS 4.3.3 (--color-lime-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(76.8% 0.233 130.85)
Hex#7ccf00, the nearest color in sRGB
RGBrgb(124 207 0)
HSLhsl(84 100% 41%)
OKLCH of the hexoklch(77.1% 0.216 132.5)
CSS variablevar(--color-lime-500)
Nearest CSS nameyellowgreen #9acd32, 0.040 away in OKLab
White text1.95:1: AA fails, AAA fails, large text fails
Black text10.78:1: AA passes, AAA passes, large text passes

About lime-500

Tailwind lime-500 is a vivid light yellow-green: OKLCH lightness 76.8%, chroma 0.233, hue 130.8 degrees. On Tailwind's lime scale it sits between lime-400 at 84.1% and lime-600 at 64.8%.

Its HSL lightness, 41%, says little about how light lime-500 looks; OKLCH, made to match the eye, measures 76.8%, 36 points away. Its value lies outside sRGB, the colors a hex code can name: #7ccf00 is what CSS Color 4's gamut mapping makes of it, chroma 0.216 instead of 0.233, moving 0.3 points of lightness and 1.6 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on lime-500 measures 10.78:1, past the 7:1 of WCAG AAA, while white text manages only 1.95:1. On the lime scale black text works down to lime-600, which leaves lime-500 1 shade of margin.

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

Tints and shades

  1. #e9f8df
  2. #d4f1bf
  3. #bee99e
  4. #a9e17b
  5. #93d853
  6. #7ccf00
  7. #60a200
  8. #457700
  9. #2c4f00
  10. #152a00
  11. #030a00

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. #7ccf00
  2. #1c2513
  3. #956aa4
  4. #f2dbfb
  5. #485d27

Recolor's generator, with lime-500 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #1c2513, #956aa4, #f2dbfb, #485d27. Open it in Recolor.

Using lime-500

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

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

Common questions

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

No. White text measures 1.95:1 on lime-500, under AA's 4.5:1; black text measures 10.78:1 and passes. The lightest lime shade for white text is lime-700.

Is Tailwind lime-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-500: oklch(76.8% 0.233 130.85); #7ccf00 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is yellowgreen (#9acd32), 0.040 away in OKLab.

Sources