RecolorOpen Recolor

A vivid dark indigo, white text passes AA

Tailwind indigo-700

Tailwind indigo-700 is oklch(45.7% 0.24 277.023) in Tailwind CSS 4.3.3, which is #432dd7 in hex and rgb(67 45 215). White text on it reaches 8.09:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#432dd7indigo-700
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(45.7% 0.24 277.023)
Hex#432dd7
RGBrgb(67 45 215)
HSLhsl(248 68% 51%)
CSS variablevar(--color-indigo-700)
Nearest CSS namemediumblue #0000cd, 0.096 away in OKLab
White text8.09:1: AA passes, AAA passes, large text passes
Black text2.60:1: AA fails, AAA fails, large text fails

About indigo-700

Tailwind indigo-700 is a vivid dark indigo: OKLCH lightness 45.7%, chroma 0.240, hue 277.0 degrees. On Tailwind's indigo scale it sits between indigo-600 at 51.1% and indigo-800 at 39.8%.

HSL and OKLCH agree on how light it is, 51% and 45.7%. Its value fits inside sRGB, so #432dd7 is the same color, not an approximation.

White text on indigo-700 measures 8.09:1, past the 7:1 of WCAG AAA, while black text manages only 2.60:1. White text passes on every indigo shade from indigo-500 down, so indigo-700 is 2 shades past the line.

The nearest CSS named color, mediumblue (#0000cd), is 0.096 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #dadffc
  2. #b6c0f8
  3. #94a0f2
  4. #757eea
  5. #595be1
  6. #432dd7
  7. #3221a8
  8. #23167c
  9. #140b52
  10. #07032c
  11. #01000a

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. #432dd7
  2. #d5ada4
  3. #242642
  4. #ffdbd0
  5. #789c83

Recolor's generator, with indigo-700 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #d5ada4, #242642, #ffdbd0, #789c83. Open it in Recolor.

Using indigo-700

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

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

Common questions

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

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

Is Tailwind indigo-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-700: oklch(45.7% 0.24 277.023); #432dd7 is its conversion to sRGB.

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

No. The nearest CSS named color is mediumblue (#0000cd), 0.096 away in OKLab.

Sources