RecolorOpen Recolor

A vivid light violet, black text passes AA

Tailwind violet-200

The hex code of Tailwind violet-200 is #ddd6ff (rgb(221 214 255)), from its Tailwind CSS 4.3.3 value oklch(89.4% 0.057 293.283). Black text on it reaches 15.14:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ddd6ffviolet-200
From the theme file of Tailwind CSS 4.3.3 (--color-violet-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(89.4% 0.057 293.283)
Hex#ddd6ff, the nearest color in sRGB
RGBrgb(221 214 255)
HSLhsl(250 100% 92%)
OKLCH of the hexoklch(89.5% 0.056 293.1)
CSS variablevar(--color-violet-200)
Nearest CSS namelavender #e6e6fa, 0.047 away in OKLab
White text1.39:1: AA fails, AAA fails, large text fails
Black text15.14:1: AA passes, AAA passes, large text passes

About violet-200

Read as numbers, violet-200 is lightness 89.4%, chroma 0.057 and hue 293.3 degrees; read by eye, it is a vivid light violet. Its neighbors on the violet scale are violet-100, 4.9 points lighter, and violet-300, 8.3 points darker.

HSL and OKLCH agree on how light it is, 92% and 89.4%. A hex code cannot hold violet-200 exactly: the value is outside sRGB, and #ddd6ff is the CSS Color 4 gamut mapping of it, chroma lowered by 0.001, 0.1 points of lightness and 0.2 degrees of hue away from the value.

Black on violet-200 reads at 15.14:1, enough for AAA body text; white reaches 1.39:1 and should stay off it. Black text passes on every violet shade from violet-50 to violet-500, 3 shades darker than violet-200.

Of the named colors, lavender (#e6e6fa) is the nearest, 0.047 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f9f8ff
  2. #f3f1ff
  3. #eeebff
  4. #e8e4ff
  5. #e3ddff
  6. #ddd6ff
  7. #ada8c8
  8. #807b94
  9. #555263
  10. #2e2c36
  11. #0b0a0f

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. #ddd6ff
  2. #58a566
  3. #352200
  4. #b3acff
  5. #4e4868

Around violet-200 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #58a566, #352200, #b3acff, #4e4868, drawn from a seed fixed by its hex. Open it in Recolor.

Using violet-200

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

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

Common questions

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

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

Is Tailwind violet-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-violet-200: oklch(89.4% 0.057 293.283); #ddd6ff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lavender (#e6e6fa), 0.047 away in OKLab.

Sources