RecolorOpen Recolor

A vivid medium indigo, black text passes AA

Tailwind indigo-400

Tailwind indigo-400 is oklch(67.3% 0.182 276.935) in Tailwind CSS 4.3.3, which is #7c86ff as the nearest sRGB hex and rgb(124 134 255). Black text on it reaches 6.71:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#7c86ffindigo-400
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(67.3% 0.182 276.935)
Hex#7c86ff, the nearest color in sRGB
RGBrgb(124 134 255)
HSLhsl(235 100% 74%)
OKLCH of the hexoklch(67.0% 0.177 276.9)
CSS variablevar(--color-indigo-400)
Nearest CSS namecornflowerblue #6495ed, 0.056 away in OKLab
White text3.13:1: AA fails, AAA fails, large text passes
Black text6.71:1: AA passes, AAA fails, large text passes

About indigo-400

Tailwind indigo-400 is a vivid medium indigo: OKLCH lightness 67.3%, chroma 0.182, hue 276.9 degrees. On Tailwind's indigo scale it sits between indigo-300 at 78.5% and indigo-500 at 58.5%.

Its lightness is 74% in HSL and 67.3% in OKLCH, 7 points apart; only the second tracks how light it looks. Its value lies outside sRGB, the colors a hex code can name: #7c86ff is what CSS Color 4's gamut mapping makes of it, chroma 0.177 instead of 0.182, moving 0.3 points of lightness and 0.0 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on indigo-400 reaches 6.71:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 3.13:1. On the indigo scale black text works down to indigo-500, which leaves indigo-400 1 shade of margin.

No CSS keyword matches it; cornflowerblue (#6495ed) is the nearest, 0.056 away in OKLab, a clear step off.

Tints and shades

  1. #e7ecff
  2. #d0d8ff
  3. #bac4ff
  4. #a4b0ff
  5. #8f9bff
  6. #7c86ff
  7. #6068c8
  8. #454b94
  9. #2c3063
  10. #151736
  11. #03040f

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. #7c86ff
  2. #e6e8ff
  3. #4d4f63
  4. #b3b6ce
  5. #212533

Recolor's generator, with indigo-400 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #e6e8ff, #4d4f63, #b3b6ce, #212533. Open it in Recolor.

Using indigo-400

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

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

Common questions

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

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

Is Tailwind indigo-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-400: oklch(67.3% 0.182 276.935); #7c86ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is cornflowerblue (#6495ed), 0.056 away in OKLab.

Sources