RecolorOpen Recolor

A vivid light indigo, black text passes AA

Tailwind indigo-300

The hex code of Tailwind indigo-300 is #a3b3ff (rgb(163 179 255)), from its Tailwind CSS 4.3.3 value oklch(78.5% 0.115 274.713). Black text on it reaches 10.45:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#a3b3ffindigo-300
From the theme file of Tailwind CSS 4.3.3 (--color-indigo-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(78.5% 0.115 274.713)
Hex#a3b3ff, the nearest color in sRGB
RGBrgb(163 179 255)
HSLhsl(230 100% 82%)
OKLCH of the hexoklch(78.3% 0.110 274.5)
CSS variablevar(--color-indigo-300)
Nearest CSS namelightsteelblue #b0c4de, 0.077 away in OKLab
White text2.01:1: AA fails, AAA fails, large text fails
Black text10.45:1: AA passes, AAA passes, large text passes

About indigo-300

Read as numbers, indigo-300 is lightness 78.5%, chroma 0.115 and hue 274.7 degrees; read by eye, it is a vivid light indigo. Its neighbors on the indigo scale are indigo-200, 8.5 points lighter, and indigo-400, 11.2 points darker.

HSL and OKLCH agree on how light it is, 82% and 78.5%. A hex code cannot hold indigo-300 exactly: the value is outside sRGB, and #a3b3ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.005, 0.2 points of lightness and 0.2 degrees of hue away from the value.

Black on indigo-300 reads at 10.45:1, enough for AAA body text; white reaches 2.01:1 and should stay off it. Black text passes on every indigo shade from indigo-50 to indigo-500, 2 shades darker than indigo-300.

The nearest CSS named color, lightsteelblue (#b0c4de), is 0.077 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #eff2ff
  2. #dfe6ff
  3. #d0d9ff
  4. #c1cdff
  5. #b2c0ff
  6. #a3b3ff
  7. #7f8cc8
  8. #5d6694
  9. #3c4363
  10. #1f2336
  11. #06070f

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. #a3b3ff
  2. #401d11
  3. #728cc4
  4. #cef4ef
  5. #595c29

Around indigo-300 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #401d11, #728cc4, #cef4ef, #595c29, drawn from a seed fixed by its hex. Open it in Recolor.

Using indigo-300

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

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

Common questions

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

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

Is Tailwind indigo-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-indigo-300: oklch(78.5% 0.115 274.713); #a3b3ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lightsteelblue (#b0c4de), 0.077 away in OKLab.

Sources