RecolorOpen Recolor

A vivid medium magenta, black text passes AA

Tailwind fuchsia-400

Tailwind fuchsia-400 is oklch(74% 0.238 322.16) in Tailwind CSS 4.3.3, which is #ed6bff as the nearest sRGB hex and rgb(237 107 255). Black text on it reaches 8.15:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ed6bfffuchsia-400
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(74% 0.238 322.16)
Hex#ed6bff, the nearest color in sRGB
RGBrgb(237 107 255)
HSLhsl(293 100% 71%)
OKLCH of the hexoklch(73.9% 0.235 322.6)
CSS variablevar(--color-fuchsia-400)
Nearest CSS nameviolet #ee82ee, 0.057 away in OKLab
White text2.58:1: AA fails, AAA fails, large text fails
Black text8.15:1: AA passes, AAA passes, large text passes

About fuchsia-400

Tailwind fuchsia-400 is a vivid medium magenta: OKLCH lightness 74.0%, chroma 0.238, hue 322.2 degrees. On Tailwind's fuchsia scale it sits between fuchsia-300 at 83.3% and fuchsia-500 at 66.7%.

HSL and OKLCH agree on how light it is, 71% and 74.0%. Its value lies outside sRGB, the colors a hex code can name: #ed6bff is what CSS Color 4's gamut mapping makes of it, chroma 0.235 instead of 0.238, moving 0.1 points of lightness and 0.5 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on fuchsia-400 measures 8.15:1, past the 7:1 of WCAG AAA, while white text manages only 2.58:1. Black text passes on every fuchsia shade from fuchsia-50 to fuchsia-600, 2 shades darker than fuchsia-400.

The nearest CSS named color, violet (#ee82ee), is 0.057 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fee8ff
  2. #fcd2ff
  3. #f9baff
  4. #f6a2ff
  5. #f288ff
  6. #ed6bff
  7. #ba52c8
  8. #893b94
  9. #5c2563
  10. #321136
  11. #0d020f

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. #ed6bff
  2. #051d1e
  3. #9f7b3c
  4. #f7d3f6
  5. #6b4700

Recolor's generator, with fuchsia-400 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #051d1e, #9f7b3c, #f7d3f6, #6b4700. Open it in Recolor.

Using fuchsia-400

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

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

Common questions

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

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

Is Tailwind fuchsia-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-400: oklch(74% 0.238 322.16); #ed6bff is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is violet (#ee82ee), 0.057 away in OKLab.

Sources