Shades of purple
Purple sits between red and blue. Reddish purples (magenta, plum, Tyrian) feel warm and rich; bluish purples (indigo, periwinkle-violet) feel cooler. Below: 32 named shades with hex codes — tap a chip to copy it.
3 light · 15 medium · 14 dark · 16 pass AA as text on white
- Lavender#E6E6FA
- Thistle#D8BFD8
- Mauve#E0B0FF
- Plum#DDA0DD
- Wisteria#C9A0DC
- Violet#EE82EE
- Lilac#C8A2C8
- Heliotrope#DF73FF
- Orchid#DA70D6
- Fuchsia#FF00FF
- Magenta#FF00FF
- Lavender (floral)#B57EDC
- Medium Purple#9370DB
- Medium Orchid#BA55D3
- Amethyst#9966CC
- Medium Slate Blue#7B68EE
- Purpureus#9A4EAE
- Medium Violet Red#C71585
- Slate Blue#6A5ACD
- Dark Orchid#9932CC
- Blue Violet#8A2BE2
- Royal purple#7851A9
- Dark Violet#9400D3
- Grape#6F2DA8
- Dark Magenta#8B008B
- Rebecca Purple#663399
- Purple#800080
- Eggplant#614051
- Dark Slate Blue#483D8B
- Byzantium#702963
- Indigo#4B0082
- Tyrian purple#66023C
Purple color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| LavenderCSS | #E6E6FA | rgb(230, 230, 250) | hsl(240 67% 94%) | (8%, 8%, 0%, 2%) | 1.23:1 | 17.06:1 |
| ThistleCSS | #D8BFD8 | rgb(216, 191, 216) | hsl(300 24% 80%) | (0%, 12%, 0%, 15%) | 1.69:1 | 12.36:1 |
| Mauve | #E0B0FF | rgb(224, 176, 255) | hsl(276 100% 85%) | (12%, 31%, 0%, 0%) | 1.77:1 | 11.82:1 |
| PlumCSS | #DDA0DD | rgb(221, 160, 221) | hsl(300 47% 75%) | (0%, 28%, 0%, 13%) | 2.06:1 | 10.14:1 |
| Wisteria | #C9A0DC | rgb(201, 160, 220) | hsl(281 46% 75%) | (9%, 27%, 0%, 14%) | 2.20:1 | 9.54:1 |
| VioletCSS | #EE82EE | rgb(238, 130, 238) | hsl(300 76% 72%) | (0%, 45%, 0%, 7%) | 2.31:1 | 9.06:1 |
| Lilac | #C8A2C8 | rgb(200, 162, 200) | hsl(300 26% 71%) | (0%, 19%, 0%, 22%) | 2.22:1 | 9.45:1 |
| Heliotrope | #DF73FF | rgb(223, 115, 255) | hsl(286 100% 73%) | (13%, 55%, 0%, 0%) | 2.61:1 | 8.03:1 |
| OrchidCSS | #DA70D6 | rgb(218, 112, 214) | hsl(302 59% 65%) | (0%, 49%, 2%, 15%) | 2.88:1 | 7.26:1 |
| FuchsiaCSS | #FF00FF | rgb(255, 0, 255) | hsl(300 100% 50%) | (0%, 100%, 0%, 0%) | 3.13:1 | 6.69:1 |
| MagentaCSS | #FF00FF | rgb(255, 0, 255) | hsl(300 100% 50%) | (0%, 100%, 0%, 0%) | 3.13:1 | 6.69:1 |
| Lavender (floral) | #B57EDC | rgb(181, 126, 220) | hsl(275 57% 68%) | (18%, 43%, 0%, 14%) | 3.00:1 | 6.98:1 |
| Medium PurpleCSS | #9370DB | rgb(147, 112, 219) | hsl(260 60% 65%) | (33%, 49%, 0%, 14%) | 3.76:1 | 5.58:1 |
| Medium OrchidCSS | #BA55D3 | rgb(186, 85, 211) | hsl(288 59% 58%) | (12%, 60%, 0%, 17%) | 3.94:1 | 5.32:1 |
| Amethyst | #9966CC | rgb(153, 102, 204) | hsl(270 50% 60%) | (25%, 50%, 0%, 20%) | 4.09:1 | 5.12:1 |
| Medium Slate BlueCSS | #7B68EE | rgb(123, 104, 238) | hsl(249 80% 67%) | (48%, 56%, 0%, 7%) | 4.15:1 | 5.05:1 |
| Purpureus | #9A4EAE | rgb(154, 78, 174) | hsl(288 38% 49%) | (11%, 55%, 0%, 32%) | 5.15:1 | 4.07:1 |
| Medium Violet RedCSS | #C71585 | rgb(199, 21, 133) | hsl(322 81% 43%) | (0%, 89%, 33%, 22%) | 5.42:1 | 3.87:1 |
| Slate BlueCSS | #6A5ACD | rgb(106, 90, 205) | hsl(248 53% 58%) | (48%, 56%, 0%, 20%) | 5.30:1 | 3.95:1 |
| Dark OrchidCSS | #9932CC | rgb(153, 50, 204) | hsl(280 61% 50%) | (25%, 75%, 0%, 20%) | 5.70:1 | 3.68:1 |
| Blue VioletCSS | #8A2BE2 | rgb(138, 43, 226) | hsl(271 76% 53%) | (39%, 81%, 0%, 11%) | 5.95:1 | 3.52:1 |
| Royal purple | #7851A9 | rgb(120, 81, 169) | hsl(267 35% 49%) | (29%, 52%, 0%, 34%) | 5.91:1 | 3.54:1 |
| Dark VioletCSS | #9400D3 | rgb(148, 0, 211) | hsl(282 100% 41%) | (30%, 100%, 0%, 17%) | 6.56:1 | 3.19:1 |
| Grape | #6F2DA8 | rgb(111, 45, 168) | hsl(272 58% 42%) | (34%, 73%, 0%, 34%) | 8.02:1 | 2.61:1 |
| Dark MagentaCSS | #8B008B | rgb(139, 0, 139) | hsl(300 100% 27%) | (0%, 100%, 0%, 45%) | 8.49:1 | 2.47:1 |
| Rebecca PurpleCSS | #663399 | rgb(102, 51, 153) | hsl(270 50% 40%) | (33%, 67%, 0%, 40%) | 8.40:1 | 2.49:1 |
| PurpleCSS | #800080 | rgb(128, 0, 128) | hsl(300 100% 25%) | (0%, 100%, 0%, 50%) | 9.41:1 | 2.22:1 |
| Eggplant | #614051 | rgb(97, 64, 81) | hsl(329 20% 32%) | (0%, 34%, 16%, 62%) | 8.89:1 | 2.36:1 |
| Dark Slate BlueCSS | #483D8B | rgb(72, 61, 139) | hsl(248 39% 39%) | (48%, 56%, 0%, 45%) | 9.06:1 | 2.31:1 |
| Byzantium | #702963 | rgb(112, 41, 99) | hsl(311 46% 30%) | (0%, 63%, 12%, 56%) | 9.60:1 | 2.18:1 |
| IndigoCSS | #4B0082 | rgb(75, 0, 130) | hsl(275 100% 25%) | (42%, 100%, 0%, 49%) | 12.95:1 | 1.62:1 |
| Tyrian purple | #66023C | rgb(102, 2, 60) | hsl(325 96% 20%) | (0%, 98%, 41%, 60%) | 12.81:1 | 1.63:1 |
Make your own shades of purple
Pick any purple and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using purple in design
Purple is common for creative, beauty and premium brands. Pale lilacs and lavenders work as backgrounds; deep purples make strong, accessible text colors.
To pair it with other hues, start from the color wheel or see colors that go with purple. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of purple are there?
There is no fixed number: screens can show millions of colors and any purple hue can be made lighter, darker or more muted. This page lists 32 named shades of purple — the CSS named colors that fall in the purple family plus widely used names such as lilac, mauve, amethyst.
What is the hex code for purple?
There is no single official purple. The CSS keyword "purple" is #800080; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of purple?
In this list the lightest is Lavender (#E6E6FA) and the darkest is Tyrian purple (#66023C), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of purple are readable as text on white?
16 of the 32 shades reach the WCAG AA ratio of 4.5:1 on white, for example Byzantium (#702963), Indigo (#4B0082), Tyrian purple (#66023C). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with purple?
See the palettes on our "colors that go with purple" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of purple?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of purple" means every variation of the hue, which is how this page uses it.