Purple family
Violet color
A deep, vivid purple with cool undertones. The reference violet is #9A0EEA, as defined by the xkcd Color Survey.
| HEX | #9A0EEA | |
|---|---|---|
| RGB | rgb(154, 14, 234) | |
| HSL | hsl(278, 89%, 49%) | |
| HSV | hsv(278, 94%, 92%) | |
| OKLCH | oklch(54.6% 0.276 306.3) | |
| CMYK* | 34, 94, 0, 8 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is violet?
Violet is the colour at the short-wavelength end of the visible spectrum, around 380 to 450 nanometres, and is also named after the violet flower. The xkcd survey violet, shown first, is a vivid blue-purple. The CSS keyword violet, #EE82EE, is something else entirely: a light pinkish purple.
Violet hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of violet in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Violet | #EE82EE | CSS named color | Noticeably different · 1% similar |
| Violet | #9A0EEA | xkcd Color Survey | Reference shown on this page |
| Violet | #9A0EEA | Color Names (meodai) | Same color |
Violet vs Purple
#9A0EEA
#800080
Violet is a single spectral colour; purple is a mix of red and blue and looks redder. In numbers: the two are 30% similar (OKLab distance 0.174). See Purple for its own codes.
Colors similar to violet
The closest named colors to #9A0EEA across all three sources, with their similarity in OKLab.
Tints and shades of violet
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with violet
Classic color-wheel combinations built on #9A0EEA, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Violet with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a violet background, white text is the better choice.
Use violet in CSS
.violet {
color: #9A0EEA;
/* or */ color: rgb(154 14 234);
/* or */ color: hsl(278 89% 49%);
/* or */ color: oklch(54.6% 0.276 306.3);
}