RecolorOpen Recolor

A vivid medium magenta, black text passes AA

Tailwind fuchsia-500

In Tailwind CSS 4.3.3, fuchsia-500 is defined as oklch(66.7% 0.295 322.15); in hex that is #e12afb, or rgb(225 42 251). Black text on it reaches 5.93:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#e12afbfuchsia-500
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(66.7% 0.295 322.15)
Hex#e12afb
RGBrgb(225 42 251)
HSLhsl(293 96% 57%)
CSS variablevar(--color-fuchsia-500)
Nearest CSS namefuchsia #ff00ff, 0.056 away in OKLab
White text3.54:1: AA fails, AAA fails, large text passes
Black text5.93:1: AA passes, AAA fails, large text passes

About fuchsia-500

In OKLCH, fuchsia-500 has a lightness of 66.7%, a chroma of 0.295 and a hue of 322.1 degrees, which makes it a vivid medium magenta. The step up to fuchsia-400 is 7.3 points of lightness, and the step down to fuchsia-600 7.6 points.

Its lightness is 57% in HSL and 66.7% in OKLCH, 9 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so fuchsia-500 converts to #e12afb without losing chroma.

With black text, fuchsia-500 passes AA at 5.93:1. White text, at 3.54:1, does not. On the fuchsia scale black text works down to fuchsia-600, which leaves fuchsia-500 1 shade of margin.

No CSS keyword matches it; fuchsia (#ff00ff) is the nearest, 0.056 away in OKLab, a clear step off.

Tints and shades

  1. #fde2ff
  2. #fac5ff
  3. #f5a7ff
  4. #ef86ff
  5. #e961fe
  6. #e12afb
  7. #b01fc5
  8. #821492
  9. #560a61
  10. #2f0335
  11. #0b000e

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. #e12afb
  2. #d0f0c8
  3. #704b7d
  4. #deb7e0
  5. #0a2f11

Locked as the first of five swatches, fuchsia-500 gets #d0f0c8, #704b7d, #deb7e0, #0a2f11 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-500

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

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

Common questions

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

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

Is Tailwind fuchsia-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-500: oklch(66.7% 0.295 322.15); #e12afb is its conversion to sRGB.

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

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

Sources