RecolorOpen Recolor

A bluish white, black text passes AA

Tailwind indigo-50

The hex code of Tailwind indigo-50 is #eef2ff (rgb(238 242 255)), from its Tailwind CSS 4.3.3 value oklch(96.2% 0.018 272.314). Black text on it reaches 18.78:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#eef2ffindigo-50
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.2% 0.018 272.314)
Hex#eef2ff, the nearest color in sRGB
RGBrgb(238 242 255)
HSLhsl(226 100% 97%)
OKLCH of the hexoklch(96.2% 0.018 272.3)
CSS variablevar(--color-indigo-50)
Nearest CSS namealiceblue #f0f8ff, 0.016 away in OKLab
White text1.12:1: AA fails, AAA fails, large text fails
Black text18.78:1: AA passes, AAA passes, large text passes

About indigo-50

Read as numbers, indigo-50 is lightness 96.2%, chroma 0.018 and hue 272.3 degrees; read by eye, it is a bluish white. As the first of the eleven indigo shades it sits closest to white, 3.8 points below it and 3.2 points above indigo-100.

Here HSL's lightness, 97%, lands near OKLCH's 96.2%, which is not true of every color. A hex code cannot hold indigo-50 exactly: the value is outside sRGB, and #eef2ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.000, 0.0 points of lightness and 0.0 degrees of hue away from the value.

Black on indigo-50 reads at 18.78:1, enough for AAA body text; white reaches 1.12:1 and should stay off it. On the indigo scale black text works down to indigo-500, which leaves indigo-50 5 shades of margin.

The CSS keyword aliceblue (#f0f8ff) is almost the same color: 0.016 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffcfd
  2. #fff9fb
  3. #fef6f8
  4. #fef3f6
  5. #fef1f4
  6. #eef2ff
  7. #c7babe
  8. #938a8c
  9. #625c5e
  10. #363233
  11. #0e0d0d

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. #eef2ff
  2. #a36f75
  3. #2f1d08
  4. #00c5f0
  5. #266576

Around indigo-50 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #a36f75, #2f1d08, #00c5f0, #266576, drawn from a seed fixed by its hex. Open it in Recolor.

Using indigo-50

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

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

Common questions

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

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

Is Tailwind indigo-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-50: oklch(96.2% 0.018 272.314); #eef2ff is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: aliceblue (#f0f8ff) is 0.016 away in OKLab, too close to tell apart by eye.

Sources