RecolorOpen Recolor

A vivid light indigo, black text passes AA

Tailwind indigo-200

In Tailwind CSS 4.3.3, indigo-200 is defined as oklch(87% 0.065 274.039); as the nearest sRGB hex that is #c6d2ff, or rgb(198 210 255). Black text on it reaches 14.06:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#c6d2ffindigo-200
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87% 0.065 274.039)
Hex#c6d2ff, the nearest color in sRGB
RGBrgb(198 210 255)
HSLhsl(227 100% 89%)
OKLCH of the hexoklch(87.0% 0.064 273.3)
CSS variablevar(--color-indigo-200)
Nearest CSS namelightblue #add8e6, 0.054 away in OKLab
White text1.49:1: AA fails, AAA fails, large text fails
Black text14.06:1: AA passes, AAA passes, large text passes

About indigo-200

In OKLCH, indigo-200 has a lightness of 87.0%, a chroma of 0.065 and a hue of 274.0 degrees, which makes it a vivid light indigo. The step up to indigo-100 is 6.0 points of lightness, and the step down to indigo-300 8.5 points.

Here HSL's lightness, 89%, lands near OKLCH's 87.0%, which is not true of every color. Indigo-200 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #c6d2ff, gives up 0.001 of chroma and moves 0.0 points of lightness and 0.7 degrees of hue; a Display P3 screen shows the full value.

For text, indigo-200 wants black: 14.06:1 clears even AAA's 7:1, and white at 1.49:1 fails AA. On the indigo scale black text works down to indigo-500, which leaves indigo-200 3 shades of margin.

No CSS keyword matches it; lightblue (#add8e6) is the nearest, 0.054 away in OKLab, a clear step off.

Tints and shades

  1. #f5f8ff
  2. #ecf0ff
  3. #e2e9ff
  4. #d9e1ff
  5. #cfdaff
  6. #c6d2ff
  7. #9ba4c8
  8. #727994
  9. #4b5063
  10. #282b36
  11. #090a0f

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. #c6d2ff
  2. #564e27
  3. #a9b0d1
  4. #211d12
  5. #79849f

Locked as the first of five swatches, indigo-200 gets #564e27, #a9b0d1, #211d12, #79849f from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using indigo-200

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

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

Common questions

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

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

Is Tailwind indigo-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-200: oklch(87% 0.065 274.039); #c6d2ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lightblue (#add8e6), 0.054 away in OKLab.

Sources