RecolorOpen Recolor

A vivid light violet, black text passes AA

Tailwind violet-300

Tailwind violet-300 is oklch(81.1% 0.111 293.571) in Tailwind CSS 4.3.3, which is #c4b4ff as the nearest sRGB hex and rgb(196 180 255). Black text on it reaches 11.32:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#c4b4ffviolet-300
From the theme file of Tailwind CSS 4.3.3 (--color-violet-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(81.1% 0.111 293.571)
Hex#c4b4ff, the nearest color in sRGB
RGBrgb(196 180 255)
HSLhsl(253 100% 85%)
OKLCH of the hexoklch(81.0% 0.106 293.7)
CSS variablevar(--color-violet-300)
Nearest CSS nameplum #dda0dd, 0.066 away in OKLab
White text1.86:1: AA fails, AAA fails, large text fails
Black text11.32:1: AA passes, AAA passes, large text passes

About violet-300

Tailwind violet-300 is a vivid light violet: OKLCH lightness 81.1%, chroma 0.111, hue 293.6 degrees. On Tailwind's violet scale it sits between violet-200 at 89.4% and violet-400 at 70.2%.

Here HSL's lightness, 85%, lands near OKLCH's 81.1%, which is not true of every color. Its value lies outside sRGB, the colors a hex code can name: #c4b4ff is what CSS Color 4's gamut mapping makes of it, chroma 0.106 instead of 0.111, moving 0.1 points of lightness and 0.1 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on violet-300 measures 11.32:1, past the 7:1 of WCAG AAA, while white text manages only 1.86:1. On the violet scale black text works down to violet-500, which leaves violet-300 2 shades of margin.

No CSS keyword matches it; plum (#dda0dd) is the nearest, 0.066 away in OKLab, a clear step off.

Tints and shades

  1. #f5f3ff
  2. #ebe6ff
  3. #e1daff
  4. #d7cdff
  5. #cdc1ff
  6. #c4b4ff
  7. #998cc8
  8. #706794
  9. #4a4463
  10. #272336
  11. #08070f

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. #c4b4ff
  2. #454b69
  3. #e1dbff
  4. #251b2c
  5. #b968b3

Recolor's generator, with violet-300 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #454b69, #e1dbff, #251b2c, #b968b3. Open it in Recolor.

Using violet-300

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

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

Common questions

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

No. White text measures 1.86:1 on violet-300, under AA's 4.5:1; black text measures 11.32:1 and passes. The lightest violet shade for white text is violet-600.

Is Tailwind violet-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-300: oklch(81.1% 0.111 293.571); #c4b4ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is plum (#dda0dd), 0.066 away in OKLab.

Sources