RecolorOpen Recolor

A vivid light yellow-green, black text passes AA

Tailwind lime-300

In Tailwind CSS 4.3.3, lime-300 is defined as oklch(89.7% 0.196 126.665); in hex that is #bbf451, or rgb(187 244 81). Black text on it reaches 16.17:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#bbf451lime-300
From the theme file of Tailwind CSS 4.3.3 (--color-lime-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(89.7% 0.196 126.665)
Hex#bbf451
RGBrgb(187 244 81)
HSLhsl(81 88% 64%)
CSS variablevar(--color-lime-300)
Nearest CSS namegreenyellow #adff2f, 0.042 away in OKLab
White text1.30:1: AA fails, AAA fails, large text fails
Black text16.17:1: AA passes, AAA passes, large text passes

About lime-300

In OKLCH, lime-300 has a lightness of 89.7%, a chroma of 0.196 and a hue of 126.7 degrees, which makes it a vivid light yellow-green. The step up to lime-200 is 4.1 points of lightness, and the step down to lime-400 5.6 points.

Its HSL lightness, 64%, says little about how light lime-300 looks; OKLCH, made to match the eye, measures 89.7%, 26 points away. The value lies inside sRGB, the gamut of a hex code, so lime-300 converts to #bbf451 without losing chroma.

For text, lime-300 wants black: 16.17:1 clears even AAA's 7:1, and white at 1.30:1 fails AA. On the lime scale black text works down to lime-600, which leaves lime-300 3 shades of margin.

Among the CSS keywords, greenyellow (#adff2f) comes closest at 0.042 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #f4fee6
  2. #e8fdcd
  3. #ddfbb3
  4. #d1f997
  5. #c6f778
  6. #bbf451
  7. #92bf3e
  8. #6b8d2b
  9. #465e1a
  10. #25330a
  11. #080d01

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. #bbf451
  2. #7c8c40
  3. #1d240f
  4. #a3bf9f
  5. #395645

Locked as the first of five swatches, lime-300 gets #7c8c40, #1d240f, #a3bf9f, #395645 from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using lime-300

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

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

Common questions

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

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

Is Tailwind lime-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-300: oklch(89.7% 0.196 126.665); #bbf451 is its conversion to sRGB.

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

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

Sources