RecolorOpen Recolor

A vivid medium magenta, white text passes AA

Tailwind fuchsia-700

Tailwind fuchsia-700 is oklch(51.8% 0.253 323.949) in Tailwind CSS 4.3.3, which is #a800b7 as the nearest sRGB hex and rgb(168 0 183). White text on it reaches 6.27:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#a800b7fuchsia-700
From the theme file of Tailwind CSS 4.3.3 (--color-fuchsia-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(51.8% 0.253 323.949)
Hex#a800b7, the nearest color in sRGB
RGBrgb(168 0 183)
HSLhsl(295 100% 36%)
OKLCH of the hexoklch(52.3% 0.246 323.8)
CSS variablevar(--color-fuchsia-700)
Nearest CSS namedarkorchid #9932cc, 0.057 away in OKLab
White text6.27:1: AA passes, AAA fails, large text passes
Black text3.35:1: AA fails, AAA fails, large text passes

About fuchsia-700

Tailwind fuchsia-700 is a vivid medium magenta: OKLCH lightness 51.8%, chroma 0.253, hue 323.9 degrees. On Tailwind's fuchsia scale it sits between fuchsia-600 at 59.1% and fuchsia-800 at 45.2%.

Its HSL lightness, 36%, says little about how light fuchsia-700 looks; OKLCH, made to match the eye, measures 51.8%, 16 points away. Its value lies outside sRGB, the colors a hex code can name: #a800b7 is what CSS Color 4's gamut mapping makes of it, chroma 0.246 instead of 0.253, moving 0.5 points of lightness and 0.1 degrees of hue. A wide-gamut screen shows the stronger original.

White text on fuchsia-700 reaches 6.27:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 3.35:1. On the fuchsia scale white text works from fuchsia-600 to fuchsia-950; fuchsia-700 has 1 shade of margin.

No CSS keyword matches it; darkorchid (#9932cc) is the nearest, 0.057 away in OKLab, a clear step off.

Tints and shades

  1. #f3dcf5
  2. #e6b9ea
  3. #d896de
  4. #c972d2
  5. #b949c5
  6. #a800b7
  7. #83008f
  8. #600069
  9. #3f0045
  10. #200024
  11. #060007

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. #a800b7
  2. #aacdad
  3. #1a2d1d
  4. #ab68ad
  5. #f3e4f4

Recolor's generator, with fuchsia-700 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #aacdad, #1a2d1d, #ab68ad, #f3e4f4. Open it in Recolor.

Using fuchsia-700

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

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

Common questions

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

Yes. White text measures 6.27:1 on fuchsia-700, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind fuchsia-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-fuchsia-700: oklch(51.8% 0.253 323.949); #a800b7 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is darkorchid (#9932cc), 0.057 away in OKLab.

Sources