Shades of Purple: 40 Purple Color Codes (HEX, RGB, HSL)
Every shade of purple, from lavender to deep violet, with its HEX, RGB, HSL and OKLCH code, plus ready-made purple color palettes. Click to copy.
Light purples
-
Pale Purple
- RGB
- HSL
- OKLCH
-
Lavender
- RGB
- HSL
- OKLCH
-
Thistle
- RGB
- HSL
- OKLCH
-
Plum
- RGB
- HSL
- OKLCH
-
Mauve
- RGB
- HSL
- OKLCH
-
Lilac
- RGB
- HSL
- OKLCH
-
Wisteria
- RGB
- HSL
- OKLCH
-
Light Pastel Purple
- RGB
- HSL
- OKLCH
Bright purples
-
Heliotrope
- RGB
- HSL
- OKLCH
-
Orchid
- RGB
- HSL
- OKLCH
-
Electric Purple
- RGB
- HSL
- OKLCH
-
Purple
- RGB
- HSL
- OKLCH
-
Violet
- RGB
- HSL
- OKLCH
-
Medium Purple
- RGB
- HSL
- OKLCH
-
Lavender Purple
- RGB
- HSL
- OKLCH
-
Amethyst
- RGB
- HSL
- OKLCH
Deep purples
-
Dark Orchid
- RGB
- HSL
- OKLCH
-
Dark Violet
- RGB
- HSL
- OKLCH
-
Grape
- RGB
- HSL
- OKLCH
-
Royal Purple
- RGB
- HSL
- OKLCH
-
Rebecca Purple
- RGB
- HSL
- OKLCH
-
Web Purple
- RGB
- HSL
- OKLCH
-
Byzantium
- RGB
- HSL
- OKLCH
-
Indigo
- RGB
- HSL
- OKLCH
Dark purples
-
Purple Navy
- RGB
- HSL
- OKLCH
-
Imperial Purple
- RGB
- HSL
- OKLCH
-
Palatinate Purple
- RGB
- HSL
- OKLCH
-
Tyrian Purple
- RGB
- HSL
- OKLCH
-
Eggplant
- RGB
- HSL
- OKLCH
-
Russian Violet
- RGB
- HSL
- OKLCH
-
Dark Purple
- RGB
- HSL
- OKLCH
-
Midnight Purple
- RGB
- HSL
- OKLCH
Pink purples
-
Purple Pizzazz
- RGB
- HSL
- OKLCH
-
Byzantine
- RGB
- HSL
- OKLCH
-
Fandango
- RGB
- HSL
- OKLCH
-
Mulberry
- RGB
- HSL
- OKLCH
-
Medium Violet Red
- RGB
- HSL
- OKLCH
-
Plum Purple
- RGB
- HSL
- OKLCH
-
Boysenberry
- RGB
- HSL
- OKLCH
-
Pansy Purple
- RGB
- HSL
- OKLCH
Purple color palettes
-
Lavender Fields
-
Dusk
-
Royal
-
Berry
-
Neon
-
Soft Lilac
How many shades of purple are there?
There is no fixed number, because purple is any mix of red and blue. In practice, designers work with named shades like lavender, amethyst, indigo and eggplant. This page lists 40 of them, grouped from the palest lavenders to the darkest purples and the pink-leaning ones.
What is the difference between purple and violet?
Violet is a spectral color: a single wavelength of light at the end of the rainbow. Purple is a mix of red and blue and does not appear in the rainbow at all. On screens both are made the same way, by mixing red and blue light, so the names are mostly about tone: violets lean blue, purples sit between red and blue.
Using purple in CSS
Purple works well as an accent color. Keep text readable: dark purples like Indigo (#4B0082) handle white text easily, while light purples like Lavender (#E6E6FA) need dark text.
:root {
--purple-light: #E6E6FA;
--purple: #7851A9;
--purple-dark: #4B0082;
}
.badge {
background: var(--purple-light);
color: var(--purple-dark);
}FAQ
What is the hex code for purple?
The CSS color purple is #800080. A brighter purple is #A020F0.
What is the hex code for lavender?
The CSS color lavender is #E6E6FA, a very pale purple. For a stronger lavender, try Lavender Purple (#967BB6).
What color is Rebecca Purple?#663399, a CSS color named in memory of Rebecca Meyer, daughter of CSS pioneer Eric Meyer.
Need a purple gradient? Use the CSS gradient generator.
More colors
Need a gradient from these colors? Use the CSS gradient generator.