Violet color (#EE82EE)
Violet is one of the 148 CSS named colors. Use the keyword violet
anywhere CSS accepts a color, or its hex code #EE82EE, which is rgb(238, 130, 238) in RGB.
It is a light, vivid cool color with a hue angle of 300° on the HSL color wheel and a perceived lightness of 76% in OKLCH. On a violet background, black text gives the higher contrast at 9.06:1, which passes WCAG AA for normal text.
Violet color codes
| CSS name | violet |
|
|---|---|---|
| HEX | #EE82EE |
|
| HEX (8-digit) | #EE82EEFF |
|
| RGB | rgb(238, 130, 238) |
|
| HSL | hsl(300, 76%, 72%) |
|
| HSV / HSB | hsv(300, 45%, 93%) |
|
| OKLCH | oklch(76.2% 0.1861 327.2) |
|
| CMYK | cmyk(0%, 45.4%, 0%, 6.7%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for violet used as text and as a background.
Tints and shades of violet
Tints mix violet with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with violet
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Violet with color blindness
Approximately how violet appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using violet in CSS
.element {
color: violet;
background-color: #ee82ee;
border-color: rgb(238 130 238 / 50%);
outline-color: oklch(76.2% 0.1861 327.2);
}Similar named colors
See all shades of purple or browse every CSS color name.