RecolorOpen Recolor

A pale yellow-green, black text passes AA

Tailwind lime-200

Tailwind lime-200 is oklch(93.8% 0.127 124.321) in Tailwind CSS 4.3.3, which is #d8f999 in hex and rgb(216 249 153). Black text on it reaches 17.93:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#d8f999lime-200
From the theme file of Tailwind CSS 4.3.3 (--color-lime-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(93.8% 0.127 124.321)
Hex#d8f999
RGBrgb(216 249 153)
HSLhsl(81 89% 79%)
CSS variablevar(--color-lime-200)
Nearest CSS namekhaki #f0e68c, 0.052 away in OKLab
White text1.17:1: AA fails, AAA fails, large text fails
Black text17.93:1: AA passes, AAA passes, large text passes

About lime-200

Tailwind lime-200 is a pale yellow-green: OKLCH lightness 93.8%, chroma 0.127, hue 124.3 degrees. On Tailwind's lime scale it sits between lime-100 at 96.7% and lime-300 at 89.7%.

HSL calls its lightness 79%, OKLCH 93.8%: 15 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #d8f999 is the same color, not an approximation.

Black text on lime-200 measures 17.93:1, past the 7:1 of WCAG AAA, while white text manages only 1.17:1. Black text passes on every lime shade from lime-50 to lime-600, 4 shades darker than lime-200.

The nearest CSS named color, khaki (#f0e68c), is 0.052 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #f8feef
  2. #f2fedf
  3. #ebfdce
  4. #e5fcbd
  5. #defaac
  6. #d8f999
  7. #a9c377
  8. #7d9057
  9. #536138
  10. #2c351c
  11. #0a0e05

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. #d8f999
  2. #5f4b71
  3. #b5c585
  4. #21192e
  5. #69883b

Recolor's generator, with lime-200 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #5f4b71, #b5c585, #21192e, #69883b. Open it in Recolor.

Using lime-200

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

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

Common questions

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

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

Is Tailwind lime-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-200: oklch(93.8% 0.127 124.321); #d8f999 is its conversion to sRGB.

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

No. The nearest CSS named color is khaki (#f0e68c), 0.052 away in OKLab.

Sources