Shades of Purple: Names, HEX & RGB Codes
Purple sits between red and blue, from pale lavender and thistle to deep indigo. Below are the CSS named purples and violets with their HEX, RGB and HSL codes.
18 named purple colors in CSS
Every name below works directly in CSS (for example color: blueviolet;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Lavenderlavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | black text, 17.06:1 | |
Thistlethistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 80%) | black text, 12.36:1 | |
Plumplum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | black text, 10.14:1 | |
Violetviolet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | black text, 9.06:1 | |
Medium Slate Bluemediumslateblue | #7B68EE | rgb(123, 104, 238) | hsl(249, 80%, 67%) | black text, 5.05:1 | |
Orchidorchid | #DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) | black text, 7.26:1 | |
Medium Purplemediumpurple | #9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | black text, 5.58:1 | |
Medium Orchidmediumorchid | #BA55D3 | rgb(186, 85, 211) | hsl(288, 59%, 58%) | black text, 5.32:1 | |
Slate Blueslateblue | #6A5ACD | rgb(106, 90, 205) | hsl(248, 53%, 58%) | white text, 5.30:1 | |
Blue Violetblueviolet | #8A2BE2 | rgb(138, 43, 226) | hsl(271, 76%, 53%) | white text, 5.95:1 | |
Fuchsiafuchsia | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) | black text, 6.69:1 | |
Dark Orchiddarkorchid | #9932CC | rgb(153, 50, 204) | hsl(280, 61%, 50%) | white text, 5.70:1 | |
Dark Violetdarkviolet | #9400D3 | rgb(148, 0, 211) | hsl(282, 100%, 41%) | white text, 6.56:1 | |
Rebecca Purplerebeccapurple | #663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) | white text, 8.40:1 | |
Dark Slate Bluedarkslateblue | #483D8B | rgb(72, 61, 139) | hsl(248, 39%, 39%) | white text, 9.06:1 | |
Dark Magentadarkmagenta | #8B008B | rgb(139, 0, 139) | hsl(300, 100%, 27%) | white text, 8.49:1 | |
Purplepurple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | white text, 9.41:1 | |
Indigoindigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | white text, 12.95:1 |
Purple tint & shade scale
A ten-step scale built from rebeccapurple (#663399). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using purple in design
rebeccapurple (#663399) was added to CSS in 2014 in memory of Rebecca Meyer, daughter of CSS expert Eric Meyer; it is the only named color added in CSS Color Level 4. Pale purples like lavender (#E6E6FA) make soft backgrounds, while indigo (#4B0082) and purple (#800080) are dark enough for text on white.
A palette to start from
More ideas: desaturated purples trend, complementary colors, or check any pair in the contrast checker.