RecolorOpen Recolor

A vivid light violet, black text passes AA

Tailwind purple-300

In Tailwind CSS 4.3.3, purple-300 is defined as oklch(82.7% 0.119 306.383); as the nearest sRGB hex that is #dab2ff, or rgb(218 178 255). Black text on it reaches 11.79:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#dab2ffpurple-300
From the theme file of Tailwind CSS 4.3.3 (--color-purple-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(82.7% 0.119 306.383)
Hex#dab2ff, the nearest color in sRGB
RGBrgb(218 178 255)
HSLhsl(271 100% 85%)
OKLCH of the hexoklch(82.5% 0.113 307.8)
CSS variablevar(--color-purple-300)
Nearest CSS nameplum #dda0dd, 0.056 away in OKLab
White text1.78:1: AA fails, AAA fails, large text fails
Black text11.79:1: AA passes, AAA passes, large text passes

About purple-300

In OKLCH, purple-300 has a lightness of 82.7%, a chroma of 0.119 and a hue of 306.4 degrees, which makes it a vivid light violet. The step up to purple-200 is 7.5 points of lightness, and the step down to purple-400 11.3 points.

HSL and OKLCH agree on how light it is, 85% and 82.7%. Purple-300 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #dab2ff, gives up 0.006 of chroma and moves 0.2 points of lightness and 1.4 degrees of hue; a Display P3 screen shows the full value.

For text, purple-300 wants black: 11.79:1 clears even AAA's 7:1, and white at 1.78:1 fails AA. Black text passes on every purple shade from purple-50 to purple-500, 2 shades darker than purple-300.

The nearest CSS named color, plum (#dda0dd), is 0.056 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #f9f2ff
  2. #f3e6ff
  3. #ecd9ff
  4. #e6ccff
  5. #e0bfff
  6. #dab2ff
  7. #ab8bc8
  8. #7e6694
  9. #544363
  10. #2d2336
  11. #0b070f

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. #dab2ff
  2. #196045
  3. #fff2c8
  4. #2b2436
  5. #966dc0

Locked as the first of five swatches, purple-300 gets #196045, #fff2c8, #2b2436, #966dc0 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using purple-300

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

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

Common questions

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

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

Is Tailwind purple-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-purple-300: oklch(82.7% 0.119 306.383); #dab2ff is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources