RecolorOpen Recolor

A pale magenta, black text passes AA

Tailwind fuchsia-100

Tailwind fuchsia-100 is oklch(95.2% 0.037 318.852) in Tailwind CSS 4.3.3, which is #fae8ff as the nearest sRGB hex and rgb(250 232 255). Black text on it reaches 18.05:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fae8fffuchsia-100
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95.2% 0.037 318.852)
Hex#fae8ff, the nearest color in sRGB
RGBrgb(250 232 255)
HSLhsl(287 100% 95%)
OKLCH of the hexoklch(95.2% 0.036 318.9)
CSS variablevar(--color-fuchsia-100)
Nearest CSS namelavender #e6e6fa, 0.029 away in OKLab
White text1.16:1: AA fails, AAA fails, large text fails
Black text18.05:1: AA passes, AAA passes, large text passes

About fuchsia-100

Tailwind fuchsia-100 is a pale magenta: OKLCH lightness 95.2%, chroma 0.037, hue 318.9 degrees. On Tailwind's fuchsia scale it sits between fuchsia-50 at 97.7% and fuchsia-200 at 90.3%.

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

Black text on fuchsia-100 measures 18.05:1, past the 7:1 of WCAG AAA, while white text manages only 1.16:1. On the fuchsia scale black text works down to fuchsia-600, which leaves fuchsia-100 5 shades of margin.

The closest CSS named color is lavender (#e6e6fa), 0.029 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #fefbff
  2. #fdf7ff
  3. #fdf4ff
  4. #fcf0ff
  5. #fbecff
  6. #fae8ff
  7. #c4b6c8
  8. #918694
  9. #615963
  10. #353036
  11. #0e0c0f

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. #fae8ff
  2. #6e4c64
  3. #f2b1c6
  4. #2b1f21
  5. #b77765

Recolor's generator, with fuchsia-100 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #6e4c64, #f2b1c6, #2b1f21, #b77765. Open it in Recolor.

Using fuchsia-100

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

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

Common questions

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

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

Is Tailwind fuchsia-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-100: oklch(95.2% 0.037 318.852); #fae8ff is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources