RecolorOpen Recolor

A vivid medium violet, black text passes AA

Tailwind purple-400

The hex code of Tailwind purple-400 is #c27aff (rgb(194 122 255)), from its Tailwind CSS 4.3.3 value oklch(71.4% 0.203 305.504). Black text on it reaches 7.52:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#c27affpurple-400
From the theme file of Tailwind CSS 4.3.3 (--color-purple-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.4% 0.203 305.504)
Hex#c27aff, the nearest color in sRGB
RGBrgb(194 122 255)
HSLhsl(272 100% 74%)
OKLCH of the hexoklch(71.0% 0.196 307.1)
CSS variablevar(--color-purple-400)
Nearest CSS nameorchid #da70d6, 0.073 away in OKLab
White text2.79:1: AA fails, AAA fails, large text fails
Black text7.52:1: AA passes, AAA passes, large text passes

About purple-400

Read as numbers, purple-400 is lightness 71.4%, chroma 0.203 and hue 305.5 degrees; read by eye, it is a vivid medium violet. Its neighbors on the purple scale are purple-300, 11.3 points lighter, and purple-500, 8.7 points darker.

Here HSL's lightness, 74%, lands near OKLCH's 71.4%, which is not true of every color. A hex code cannot hold purple-400 exactly: the value is outside sRGB, and #c27aff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.007, 0.4 points of lightness and 1.6 degrees of hue away from the value.

Black on purple-400 reads at 7.52:1, enough for AAA body text; white reaches 2.79:1 and should stay off it. On the purple scale black text works down to purple-500, which leaves purple-400 1 shade of margin.

No CSS keyword matches it; orchid (#da70d6) is the nearest, 0.073 away in OKLab, a clear step off.

Tints and shades

  1. #f5eaff
  2. #ead4ff
  3. #e0bfff
  4. #d6a9ff
  5. #cc92ff
  6. #c27aff
  7. #985ec8
  8. #6f4494
  9. #492b63
  10. #271436
  11. #08030f

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. #c27aff
  2. #1b1926
  3. #9186a3
  4. #ffe1ff
  5. #69535f

Around purple-400 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #1b1926, #9186a3, #ffe1ff, #69535f, drawn from a seed fixed by its hex. Open it in Recolor.

Using purple-400

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

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

Common questions

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

No. White text measures 2.79:1 on purple-400, under AA's 4.5:1; black text measures 7.52:1 and passes. The lightest purple shade for white text is purple-600.

Is Tailwind purple-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-400: oklch(71.4% 0.203 305.504); #c27aff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is orchid (#da70d6), 0.073 away in OKLab.

Sources