RecolorOpen Recolor

A dark indigo, white text passes AA

Tailwind indigo-900

The hex code of Tailwind indigo-900 is #312c85 (rgb(49 44 133)), from its Tailwind CSS 4.3.3 value oklch(35.9% 0.144 278.697). White text on it reaches 11.48:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#312c85indigo-900
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(35.9% 0.144 278.697)
Hex#312c85
RGBrgb(49 44 133)
HSLhsl(243 50% 35%)
CSS variablevar(--color-indigo-900)
Nearest CSS namedarkslateblue #483d8b, 0.061 away in OKLab
White text11.48:1: AA passes, AAA passes, large text passes
Black text1.83:1: AA fails, AAA fails, large text fails

About indigo-900

Read as numbers, indigo-900 is lightness 35.9%, chroma 0.144 and hue 278.7 degrees; read by eye, it is a dark indigo. Its neighbors on the indigo scale are indigo-800, 3.9 points lighter, and indigo-950, 10.2 points darker.

HSL and OKLCH agree on how light it is, 35% and 35.9%. No gamut mapping is needed here: oklch(35.9% 0.144 278.697) sits inside sRGB and #312c85 matches it.

White on indigo-900 reads at 11.48:1, enough for AAA body text; black reaches 1.83:1 and should stay off it. White text passes on every indigo shade from indigo-500 down, so indigo-900 is 4 shades past the line.

The nearest CSS named color, darkslateblue (#483d8b), is 0.061 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #d8dbec
  2. #b2b7d8
  3. #8e94c4
  4. #6c72b0
  5. #4c509b
  6. #312c85
  7. #242067
  8. #18154b
  9. #0c0a30
  10. #040317
  11. #000004

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. #312c85
  2. #a4c1ee
  3. #181923
  4. #8e68b6
  5. #f5ccfd

Around indigo-900 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #a4c1ee, #181923, #8e68b6, #f5ccfd, drawn from a seed fixed by its hex. Open it in Recolor.

Using indigo-900

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

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

Common questions

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

Yes. White text measures 11.48:1 on indigo-900, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind indigo-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-900: oklch(35.9% 0.144 278.697); #312c85 is its conversion to sRGB.

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

No. The nearest CSS named color is darkslateblue (#483d8b), 0.061 away in OKLab.

Sources