Tailwind fuchsia colours
The eleven fuchsia shades in the default Tailwind CSS palette, with the contrast figures that decide which of them you can actually put text on.
Every fuchsia shade
| Class | Hex | RGB | On white | Text colour | As text |
|---|---|---|---|---|---|
fuchsia-50 | #FDF4FF | 253, 244, 255 | 1.07:1 | black | — |
fuchsia-100 | #FAE8FF | 250, 232, 255 | 1.16:1 | black | — |
fuchsia-200 | #F5D0FE | 245, 208, 254 | 1.37:1 | black | — |
fuchsia-300 | #F0ABFC | 240, 171, 252 | 1.76:1 | black | — |
fuchsia-400 | #E879F9 | 232, 121, 249 | 2.46:1 | black | — |
fuchsia-500 | #D946EF | 217, 70, 239 | 3.46:1 | black | large only |
fuchsia-600 | #C026D3 | 192, 38, 211 | 4.71:1 | white | AA |
fuchsia-700 | #A21CAF | 162, 28, 175 | 6.32:1 | white | AA |
fuchsia-800 | #86198F | 134, 25, 143 | 8.24:1 | white | AA |
fuchsia-900 | #701A75 | 112, 26, 117 | 10.03:1 | white | AA |
fuchsia-950 | #4A044E | 74, 4, 78 | 14.8:1 | white | AA |
"On white" is the contrast ratio against a white page. "As text" is whether that ratio passes WCAG AA for normal text, which needs 4.5:1; large text needs only 3:1.
Where the scale turns over
fuchsia-600 is the lightest shade that reaches 4.5:1 against white, so it is the first one usable for body text on a white page. It is also where a background of this hue stops taking black text and starts needing white — the two thresholds are 4.5:1 and 4.58:1, and on this scale they fall on the same step.
Using fuchsia in Tailwind
<div class="bg-fuchsia-500 text-black">
<p class="text-fuchsia-600">The text class above is the lightest fuchsia that still passes AA on a white background.
Frequently asked questions
What is the hex code for Tailwind fuchsia-500?
#D946EF — RGB 217, 70, 239. Full values and contrast for #D946EF.
Which Tailwind fuchsia shades can I use for text?
fuchsia-600, fuchsia-700, fuchsia-800, fuchsia-900, fuchsia-950 reach 4.5:1 against white and pass AA for normal text. Anything lighter fails, whatever it looks like on your monitor.
Should text on a fuchsia background be black or white?
Black up to fuchsia-500, white from fuchsia-600 down. The two are never both comfortable: at the crossover neither reaches 4.5:1.