RecolorOpen Recolor

A pale magenta, black text passes AA

Tailwind fuchsia-200

In Tailwind CSS 4.3.3, fuchsia-200 is defined as oklch(90.3% 0.076 319.62); as the nearest sRGB hex that is #f6cfff, or rgb(246 207 255). Black text on it reaches 15.29:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f6cffffuchsia-200
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.3% 0.076 319.62)
Hex#f6cfff, the nearest color in sRGB
RGBrgb(246 207 255)
HSLhsl(289 100% 91%)
OKLCH of the hexoklch(90.2% 0.077 319.9)
CSS variablevar(--color-fuchsia-200)
Nearest CSS namelavender #e6e6fa, 0.063 away in OKLab
White text1.37:1: AA fails, AAA fails, large text fails
Black text15.29:1: AA passes, AAA passes, large text passes

About fuchsia-200

In OKLCH, fuchsia-200 has a lightness of 90.3%, a chroma of 0.076 and a hue of 319.6 degrees, which makes it a pale magenta. The step up to fuchsia-100 is 4.9 points of lightness, and the step down to fuchsia-300 7.0 points.

HSL and OKLCH agree on how light it is, 91% and 90.3%. Fuchsia-200 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #f6cfff, gives up -0.001 of chroma and moves 0.1 points of lightness and 0.3 degrees of hue; a Display P3 screen shows the full value.

For text, fuchsia-200 wants black: 15.29:1 clears even AAA's 7:1, and white at 1.37:1 fails AA. Black text passes on every fuchsia shade from fuchsia-50 to fuchsia-600, 4 shades darker than fuchsia-200.

The nearest CSS named color, lavender (#e6e6fa), is 0.063 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fef7ff
  2. #fcefff
  3. #fbe7ff
  4. #f9dfff
  5. #f8d7ff
  6. #f6cfff
  7. #c1a2c8
  8. #8f7794
  9. #5f4f63
  10. #342a36
  11. #0e0a0f

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. #f6cfff
  2. #724a79
  3. #a3d1a4
  4. #202d19
  5. #9d6eaa

Locked as the first of five swatches, fuchsia-200 gets #724a79, #a3d1a4, #202d19, #9d6eaa from Recolor's generator, a complementary palette, built on the hue opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using fuchsia-200

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

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

Common questions

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

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

Is Tailwind fuchsia-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-200: oklch(90.3% 0.076 319.62); #f6cfff is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources