RecolorOpen Recolor

A vivid medium indigo, black and white text both pass AA

Tailwind indigo-500

In Tailwind CSS 4.3.3, indigo-500 is defined as oklch(58.5% 0.233 277.117); as the nearest sRGB hex that is #615fff, or rgb(97 95 255). Black text on it reaches 4.59:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#615fffindigo-500
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(58.5% 0.233 277.117)
Hex#615fff, the nearest color in sRGB
RGBrgb(97 95 255)
HSLhsl(241 100% 69%)
OKLCH of the hexoklch(58.3% 0.230 277.1)
CSS variablevar(--color-indigo-500)
Nearest CSS namemediumslateblue #7b68ee, 0.052 away in OKLab
White text4.58:1: AA passes, AAA fails, large text passes
Black text4.59:1: AA passes, AAA fails, large text passes

About indigo-500

In OKLCH, indigo-500 has a lightness of 58.5%, a chroma of 0.233 and a hue of 277.1 degrees, which makes it a vivid medium indigo. The step up to indigo-400 is 8.8 points of lightness, and the step down to indigo-600 7.4 points.

HSL calls its lightness 69%, OKLCH 58.5%: 10 points between a formula and a measure of what the eye sees. Indigo-500 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #615fff, gives up 0.003 of chroma and moves 0.2 points of lightness and 0.0 degrees of hue; a Display P3 screen shows the full value.

Black and white text both clear 4.5:1 on indigo-500, at 4.59:1 and 4.58:1: a rare middle ground where either ink meets WCAG AA. Indigo-500 is where the indigo scale turns over: lighter shades need black text, darker ones white, and this one takes either.

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

Tints and shades

  1. #e1e6ff
  2. #c4cdff
  3. #a8b4ff
  4. #8e9aff
  5. #767eff
  6. #615fff
  7. #4a49c8
  8. #353494
  9. #212063
  10. #0e0e36
  11. #02020f

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. #615fff
  2. #162232
  3. #b2b8d0
  4. #4c4859
  5. #ffdefe

Locked as the first of five swatches, indigo-500 gets #162232, #b2b8d0, #4c4859, #ffdefe 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 indigo-500

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

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

Common questions

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

Yes. White text measures 4.58:1 on indigo-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind indigo-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-500: oklch(58.5% 0.233 277.117); #615fff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is mediumslateblue (#7b68ee), 0.052 away in OKLab.

Sources