Shades of Pink
← Shades generatorOnly one CSS pink clears 4.5:1 on white, and it is not the one you expect
Pink has no wavelength of its own. There is no pink line in a spectrum: the sensation comes from long and short wavelengths together with a gap in the middle, which is why pink and magenta are called extra-spectral. In practical terms the CSS pinks are red mixed toward white and rotated a little toward blue, so almost every one of them is already a tint. That is the source of their single recurring problem, which is contrast.
Run the numbers and the family collapses. Pink sits near 1.5:1 against white, hotpink near 2.6:1, magenta and palevioletred near 3.1:1, deeppink near 3.6:1. Mediumvioletred is the only one that clears 4.5:1, at roughly 5.4:1. Everything else in the family is a fill, a border, a chart series or a background, and if a design calls for pink type on white the honest answer is to generate a shade of it instead.
Every CSS pink name, with its contrast on white
The 15 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| lavenderblush | #fff0f5 | rgb(255, 240, 245) | 1.10:1 | fails |
| mistyrose | #ffe4e1 | rgb(255, 228, 225) | 1.20:1 | fails |
| pink | #ffc0cb | rgb(255, 192, 203) | 1.54:1 | fails |
| lightpink | #ffb6c1 | rgb(255, 182, 193) | 1.65:1 | fails |
| plum | #dda0dd | rgb(221, 160, 221) | 2.07:1 | fails |
| violet | #ee82ee | rgb(238, 130, 238) | 2.32:1 | fails |
| lightcoral | #f08080 | rgb(240, 128, 128) | 2.59:1 | fails |
| hotpink | #ff69b4 | rgb(255, 105, 180) | 2.65:1 | fails |
| orchid | #da70d6 | rgb(218, 112, 214) | 2.89:1 | fails |
| palevioletred | #db7093 | rgb(219, 112, 147) | 3.11:1 | AA large |
| fuchsia | #ff00ff | rgb(255, 0, 255) | 3.14:1 | AA large |
| magenta | #ff00ff | rgb(255, 0, 255) | 3.14:1 | AA large |
| deeppink | #ff1493 | rgb(255, 20, 147) | 3.64:1 | AA large |
| crimson | #dc143c | rgb(220, 20, 60) | 4.99:1 | AA |
| mediumvioletred | #c71585 | rgb(199, 21, 133) | 5.42:1 | AA |
The pink names are a small study in inconsistency. Magenta and fuchsia are one value, #FF00FF, kept under two names because one came from X11 and the other from the HTML sixteen. Fuchsia is spelled after the flower, itself named for the botanist Leonhart Fuchs; magenta after an aniline dye of the 1860s, named for a battle in northern Italy. Mediumvioletred is darker than palevioletred, and lightpink is darker than pink.
Tints, shades and tones of #ff69b4
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using pink in an interface
Pinks work as surfaces and accents: tinted rows, badges, chart series, the fill behind a highlighted change. They fail as text on white and as small icons, where the shape thins out and the colour has nothing left to hold it. If a pink has to carry meaning, put it on a dark ground instead, where deeppink and hotpink both gain a lot of separation, or darken the pink itself until it reaches mediumvioletred territory.
FAQ
- Is magenta the same as fuchsia?
- Yes, exactly. Both are #FF00FF, or rgb(255, 0, 255), and browsers treat the two keywords as interchangeable. Fuchsia is the name from the sixteen HTML colours and magenta is the X11 name for the same value, and the merge that produced modern CSS kept both. Aqua and cyan are the other pair with this history. Neither name has any effect on rendering.
- Can I use pink text on a white background?
- Only if it is large or you pick carefully. Of the named pinks, mediumvioletred at about 5.4:1 is the one that passes AA for body text on white. Deeppink at roughly 3.6:1 and palevioletred at 3.1:1 pass only for large text, meaning 24px regular or 18.66px bold. Everything paler fails at any size.
- Where does the colour name pink come from?
- From a flower, not the other way round. Pink was a garden flower, a dianthus with a frilled edge, before it was a colour, and the usual account links that edge to the old sense of pinking as cutting a jagged line, the same word behind pinking shears. The colour sense is the newer one, which is why the family stays close to plants and dyes.
