RecolorOpen Recolor

A purplish white, black text passes AA

Tailwind fuchsia-50

The hex code of Tailwind fuchsia-50 is #fdf4ff (rgb(253 244 255)), from its Tailwind CSS 4.3.3 value oklch(97.7% 0.017 320.058). Black text on it reaches 19.56:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fdf4fffuchsia-50
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.7% 0.017 320.058)
Hex#fdf4ff
RGBrgb(253 244 255)
HSLhsl(289 100% 98%)
CSS variablevar(--color-fuchsia-50)
Nearest CSS nameghostwhite #f8f8ff, 0.012 away in OKLab
White text1.07:1: AA fails, AAA fails, large text fails
Black text19.56:1: AA passes, AAA passes, large text passes

About fuchsia-50

Read as numbers, fuchsia-50 is lightness 97.7%, chroma 0.017 and hue 320.1 degrees; read by eye, it is a purplish white. It opens the fuchsia scale as its lightest shade, 2.5 points of lightness above fuchsia-100.

HSL and OKLCH agree on how light it is, 98% and 97.7%. No gamut mapping is needed here: oklch(97.7% 0.017 320.058) sits inside sRGB and #fdf4ff matches it.

Black on fuchsia-50 reads at 19.56:1, enough for AAA body text; white reaches 1.07:1 and should stay off it. Black text passes on every fuchsia shade from fuchsia-50 to fuchsia-600, 6 shades darker than fuchsia-50.

Its nearest CSS named color, ghostwhite (#f8f8ff), is 0.012 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffdfe
  2. #fffbfc
  3. #fff9fb
  4. #fff7fa
  5. #fff5f8
  6. #fdf4ff
  7. #cbbfc2
  8. #968d8f
  9. #655e60
  10. #373334
  11. #0f0d0e

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. #fdf4ff
  2. #718941
  3. #0d2012
  4. #86c5ae
  5. #3a5452

Around fuchsia-50 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #718941, #0d2012, #86c5ae, #3a5452, drawn from a seed fixed by its hex. Open it in Recolor.

Using fuchsia-50

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

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

Common questions

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

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

Is Tailwind fuchsia-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-50: oklch(97.7% 0.017 320.058); #fdf4ff is its conversion to sRGB.

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

Yes, nearly: ghostwhite (#f8f8ff) is 0.012 away in OKLab, too close to tell apart by eye.

Sources