RecolorOpen Recolor

A vivid light yellow-green, black text passes AA

Tailwind lime-400

The hex code of Tailwind lime-400 is #9ae600 (rgb(154 230 0)), from its Tailwind CSS 4.3.3 value oklch(84.1% 0.238 128.85). Black text on it reaches 13.69:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#9ae600lime-400
From the theme file of Tailwind CSS 4.3.3 (--color-lime-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(84.1% 0.238 128.85)
Hex#9ae600, the nearest color in sRGB
RGBrgb(154 230 0)
HSLhsl(80 100% 45%)
OKLCH of the hexoklch(84.3% 0.226 129.6)
CSS variablevar(--color-lime-400)
Nearest CSS namelawngreen #7cfc00, 0.061 away in OKLab
White text1.53:1: AA fails, AAA fails, large text fails
Black text13.69:1: AA passes, AAA passes, large text passes

About lime-400

Read as numbers, lime-400 is lightness 84.1%, chroma 0.238 and hue 128.8 degrees; read by eye, it is a vivid light yellow-green. Its neighbors on the lime scale are lime-300, 5.6 points lighter, and lime-500, 7.3 points darker.

HSL puts its lightness at 45% and OKLCH at 84.1%, 39 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold lime-400 exactly: the value is outside sRGB, and #9ae600 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.012, 0.2 points of lightness and 0.8 degrees of hue away from the value.

Black on lime-400 reads at 13.69:1, enough for AAA body text; white reaches 1.53:1 and should stay off it. Black text passes on every lime shade from lime-50 to lime-600, 2 shades darker than lime-400.

The nearest CSS named color, lawngreen (#7cfc00), is 0.061 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #eefce2
  2. #ddf8c3
  3. #cdf4a4
  4. #bcf081
  5. #abeb58
  6. #9ae600
  7. #78b400
  8. #578500
  9. #395900
  10. #1d3000
  11. #050c00

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. #9ae600
  2. #524d93
  3. #dffdd1
  4. #9d778f
  5. #15210e

Around lime-400 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #524d93, #dffdd1, #9d778f, #15210e, drawn from a seed fixed by its hex. Open it in Recolor.

Using lime-400

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

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

Common questions

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

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

Is Tailwind lime-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-400: oklch(84.1% 0.238 128.85); #9ae600 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lawngreen (#7cfc00), 0.061 away in OKLab.

Sources