RecolorOpen Recolor

A pale indigo, black text passes AA

Tailwind indigo-100

Tailwind indigo-100 is oklch(93% 0.034 272.788) in Tailwind CSS 4.3.3, which is #e0e7ff as the nearest sRGB hex and rgb(224 231 255). Black text on it reaches 17.04:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e0e7ffindigo-100
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(93% 0.034 272.788)
Hex#e0e7ff, the nearest color in sRGB
RGBrgb(224 231 255)
HSLhsl(226 100% 94%)
OKLCH of the hexoklch(93.0% 0.033 272.8)
CSS variablevar(--color-indigo-100)
Nearest CSS namelavender #e6e6fa, 0.009 away in OKLab
White text1.23:1: AA fails, AAA fails, large text fails
Black text17.04:1: AA passes, AAA passes, large text passes

About indigo-100

Tailwind indigo-100 is a pale indigo: OKLCH lightness 93.0%, chroma 0.034, hue 272.8 degrees. On Tailwind's indigo scale it sits between indigo-50 at 96.2% and indigo-200 at 87.0%.

HSL and OKLCH agree on how light it is, 94% and 93.0%. Its value lies outside sRGB, the colors a hex code can name: #e0e7ff is what CSS Color 4's gamut mapping makes of it, chroma 0.033 instead of 0.034, moving 0.0 points of lightness and 0.0 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on indigo-100 measures 17.04:1, past the 7:1 of WCAG AAA, while white text manages only 1.23:1. Black text passes on every indigo shade from indigo-50 to indigo-500, 4 shades darker than indigo-100.

Its nearest CSS named color, lavender (#e6e6fa), is 0.009 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fafbff
  2. #f5f7ff
  3. #eff3ff
  4. #eaefff
  5. #e5ebff
  6. #e0e7ff
  7. #afb5c8
  8. #818694
  9. #565963
  10. #2e3036
  11. #0b0c0f

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. #e0e7ff
  2. #a47b92
  3. #2d0e19
  4. #d5b0ad
  5. #93491d

Recolor's generator, with indigo-100 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #a47b92, #2d0e19, #d5b0ad, #93491d. Open it in Recolor.

Using indigo-100

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

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

Common questions

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

No. White text measures 1.23:1 on indigo-100, under AA's 4.5:1; black text measures 17.04:1 and passes. The lightest indigo shade for white text is indigo-500.

Is Tailwind indigo-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-100: oklch(93% 0.034 272.788); #e0e7ff is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: lavender (#e6e6fa) is 0.009 away in OKLab, too close to tell apart by eye.

Sources