Shades of Purple
← Shades generatorThe only CSS colour name added since the 1980s list lives in this family
Purple is where the spectrum closes into a circle. Violet is a real wavelength at the short end, but the purples between it and red are mixtures with no single wavelength behind them, which is why the hue wheel has to loop rather than run out. The CSS family reflects that split awkwardly: violet, darkviolet and blueviolet all exist and none of them is a lighter or darker version of the others, while purple itself, #800080, is a dark magenta.
One name in this family is not inherited from anywhere. Rebeccapurple, #663399, was added to CSS Color Level 4 in 2014 after the death of Rebecca Meyer, the six-year-old daughter of the web developer Eric Meyer. It was proposed as beccapurple and renamed at the request of her family, since she was to be called Rebecca once she turned six. It is the only colour keyword in CSS that does not come from the X11 list.
Every CSS purple name, with its contrast on white
The 19 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 |
|---|---|---|---|---|
| lavender | #e6e6fa | rgb(230, 230, 250) | 1.23:1 | fails |
| thistle | #d8bfd8 | rgb(216, 191, 216) | 1.70:1 | fails |
| plum | #dda0dd | rgb(221, 160, 221) | 2.07:1 | fails |
| violet | #ee82ee | rgb(238, 130, 238) | 2.32:1 | fails |
| orchid | #da70d6 | rgb(218, 112, 214) | 2.89:1 | fails |
| fuchsia | #ff00ff | rgb(255, 0, 255) | 3.14:1 | AA large |
| magenta | #ff00ff | rgb(255, 0, 255) | 3.14:1 | AA large |
| mediumpurple | #9370db | rgb(147, 112, 219) | 3.76:1 | AA large |
| mediumorchid | #ba55d3 | rgb(186, 85, 211) | 3.94:1 | AA large |
| mediumslateblue | #7b68ee | rgb(123, 104, 238) | 4.15:1 | AA large |
| slateblue | #6a5acd | rgb(106, 90, 205) | 5.31:1 | AA |
| mediumvioletred | #c71585 | rgb(199, 21, 133) | 5.42:1 | AA |
| darkorchid | #9932cc | rgb(153, 50, 204) | 5.70:1 | AA |
| blueviolet | #8a2be2 | rgb(138, 43, 226) | 5.96:1 | AA |
| darkviolet | #9400d3 | rgb(148, 0, 211) | 6.56:1 | AA |
| rebeccapurple | #663399 | rgb(102, 51, 153) | 8.41:1 | AAA |
| darkmagenta | #8b008b | rgb(139, 0, 139) | 8.50:1 | AAA |
| purple | #800080 | rgb(128, 0, 128) | 9.42:1 | AAA |
| indigo | #4b0082 | rgb(75, 0, 130) | 12.95:1 | AAA |
Purple came in with the sixteen HTML colours at #800080, exactly half of magenta. Everything else here arrived from X11: orchid and plum from plants, thistle from a weed, indigo from the dye. The naming is unsystematic in the usual way. Orchid gets a medium and a dark variant while plum and thistle get none, and darkviolet is not a darkened violet but a far more saturated colour that happens to be deeper.
Tints, shades and tones of #800080
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 purple in an interface
Browsers have painted visited links a dark purple since the 1990s, so purple in body text still reads as something already clicked; that is worth knowing before choosing it as a link colour. Otherwise the family is unusually well behaved for interfaces: rebeccapurple at about 8.4:1, indigo near 13:1 and purple near 9.4:1 all clear AAA against white, while mediumpurple, plum and thistle stay in fill and background territory.
FAQ
- What hex is rebeccapurple?
- Rebeccapurple is #663399, or rgb(102, 51, 153). In hexadecimal it is three repeated pairs, 66, 33 and 99, which makes it easy to remember. Against white it measures about 8.4:1, past the 7:1 that AAA asks for at normal text sizes, so it is a purple you can set body copy in rather than a decorative one.
- Is indigo a purple or a blue?
- Both, depending on who is asking. CSS indigo is #4B0082, which sits on the blue side of the purples and reads as a deep violet-blue. The name comes from the dye, and its place in the rainbow comes from Newton, who wanted seven bands and split the blue end in two. There is no physical boundary there, only a naming convention that stuck.
- Why is purple associated with royalty?
- By convention rather than anything in the colour. The historical reason usually given is cost: Tyrian purple was extracted from sea snails in tiny quantities, so it priced most people out, and sumptuary rules in some places reserved it. Cheap synthetic dyes from the 1850s onward ended that, but the association outlived the economics. Nothing in the wavelength or the hex value carries any of it.
