RecolorOpen Recolor

Eleven shades, from fuchsia-50 to fuchsia-950

Tailwind fuchsia colors

Tailwind CSS 4.3.3 defines eleven fuchsia shades in OKLCH, from fuchsia-50 (#fdf4ff) to fuchsia-950 (#4b004f). On them white text passes WCAG AA from fuchsia-600 to fuchsia-950, and black text from fuchsia-50 to fuchsia-600. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#fdf4ff
  2. 100#fae8ff
  3. 200#f6cfff
  4. 300#f4a8ff
  5. 400#ed6bff
  6. 500#e12afb
  7. 600#c800de
  8. 700#a800b7
  9. 800#8a0194
  10. 900#721378
  11. 950#4b004f
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
fuchsia-50oklch(97.7% 0.017 320.058)#fdf4ff1.07:1 fails19.56:1 passes
fuchsia-100oklch(95.2% 0.037 318.852)#fae8ff1.16:1 fails18.05:1 passes
fuchsia-200oklch(90.3% 0.076 319.62)#f6cfff1.37:1 fails15.29:1 passes
fuchsia-300oklch(83.3% 0.145 321.434)#f4a8ff1.77:1 fails11.89:1 passes
fuchsia-400oklch(74% 0.238 322.16)#ed6bff2.58:1 fails8.15:1 passes
fuchsia-500oklch(66.7% 0.295 322.15)#e12afb3.54:1 fails5.93:1 passes
fuchsia-600oklch(59.1% 0.293 322.896)#c800de4.66:1 passes4.51:1 passes
fuchsia-700oklch(51.8% 0.253 323.949)#a800b76.27:1 passes3.35:1 fails
fuchsia-800oklch(45.2% 0.211 324.591)#8a01948.36:1 passes2.51:1 fails
fuchsia-900oklch(40.1% 0.17 325.612)#72137810.10:1 passes2.08:1 fails
fuchsia-950oklch(29.3% 0.136 325.661)#4b004f14.87:1 passes1.41:1 fails

Text on fuchsia, and fuchsia as text

As a text color the rule turns around: fuchsia text on a white page passes AA from fuchsia-600 on, and on a black page up to fuchsia-600, since a contrast ratio is the same whichever color is in front.

Chroma peaks at fuchsia-500 (0.295) and falls toward both ends, while the hue drifts 6.8 degrees across the scale.

6 of the eleven lie outside sRGB, so their hex codes are the nearest sRGB colors, and a wide-gamut screen shows them stronger.

Sources