RecolorOpen Recolor

A pale yellow, black text passes AA

Tailwind lime-100

The hex code of Tailwind lime-100 is #ecfcca (rgb(236 252 202)), from its Tailwind CSS 4.3.3 value oklch(96.7% 0.067 122.328). Black text on it reaches 19.34:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ecfccalime-100
From the theme file of Tailwind CSS 4.3.3 (--color-lime-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.7% 0.067 122.328)
Hex#ecfcca
RGBrgb(236 252 202)
HSLhsl(79 89% 89%)
CSS variablevar(--color-lime-100)
Nearest CSS namelightgoldenrodyellow #fafad2, 0.023 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.34:1: AA passes, AAA passes, large text passes

About lime-100

Read as numbers, lime-100 is lightness 96.7%, chroma 0.067 and hue 122.3 degrees; read by eye, it is a pale yellow. Its neighbors on the lime scale are lime-50, 1.9 points lighter, and lime-200, 2.9 points darker.

Its lightness is 89% in HSL and 96.7% in OKLCH, 8 points apart; only the second tracks how light it looks. No gamut mapping is needed here: oklch(96.7% 0.067 122.328) sits inside sRGB and #ecfcca matches it.

Black on lime-100 reads at 19.34:1, enough for AAA body text; white reaches 1.09:1 and should stay off it. On the lime scale black text works down to lime-600, which leaves lime-100 5 shades of margin.

Of the named colors, lightgoldenrodyellow (#fafad2) is the nearest, 0.023 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fcfff6
  2. #f9feee
  3. #f5fee5
  4. #f2fddc
  5. #effdd3
  6. #ecfcca
  7. #b9c69e
  8. #899274
  9. #5b624d
  10. #313529
  11. #0d0e09

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. #ecfcca
  2. #556140
  3. #dbafbb
  4. #262c1c
  5. #6095ba

Around lime-100 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #556140, #dbafbb, #262c1c, #6095ba, drawn from a seed fixed by its hex. Open it in Recolor.

Using lime-100

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

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

Common questions

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

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

Is Tailwind lime-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-lime-100: oklch(96.7% 0.067 122.328); #ecfcca is its conversion to sRGB.

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

No. The nearest CSS named color is lightgoldenrodyellow (#fafad2), 0.023 away in OKLab.

Sources