Shades of Purple
with Hex Codes
Purple has been associated with royalty, luxury, and mystery for centuries. In CSS, the base purple is #800080, but designers use dozens of variations: deep indigo for authority, bright violet for creativity, soft lavender for calm UIs, rich plum for premium brands, and bold magenta for high-energy designs.
57+Color Shades
1-clickCopy Hex Code
3Filter Categories
Complete List of Purple Color Shades
Click to copy
HTML
Purple
#800080
Click to copy
HTML
Indigo
#4B0082
Click to copy
HTML
Lavender
#E6E6FA
Click to copy
HTML
Thistle
#D8BFD8
Click to copy
HTML
Plum
#DDA0DD
Click to copy
HTML
Violet
#EE82EE
Click to copy
HTML
Orchid
#DA70D6
Click to copy
HTML
Fuchsia
#FF00FF
Click to copy
HTML
Magenta
#FF00FF
Click to copy
HTML
Medium Orchid
#BA55D3
Click to copy
HTML
Medium Purple
#9370DB
Click to copy
HTML
Dark Violet
#9400D3
Click to copy
HTML
Dark Orchid
#9932CC
Click to copy
HTML
Dark Magenta
#8B008B
Click to copy
HTML
Blue Violet
#8A2BE2
Click to copy
HTML
Dark Slate Blue
#483D8B
Click to copy
HTML
Slate Blue
#6A5ACD
Click to copy
HTML
Medium Slate Blue
#7B68EE
Click to copy
HTML
Lavender Blush
#FFF0F5
Click to copy
Amethyst
#9966CC
Click to copy
Byzantium
#702963
Click to copy
Heliotrope
#DF73FF
Click to copy
Lilac
#C8A2C8
Click to copy
Mauve
#E0B0FF
Click to copy
Periwinkle
#CCCCFF
Click to copy
Wisteria
#C9A0DC
Click to copy
Mulberry
#C54B8C
Click to copy
Iris
#5A4FCF
Click to copy
Majorelle Blue
#6050DC
Click to copy
Electric Purple
#BF00FF
Click to copy
Neon Purple
#B026FF
Click to copy
Royal Purple
#7851A9
Click to copy
Grape
#6F2DA8
Click to copy
Eggplant
#614051
Click to copy
Eminence
#6C3082
Click to copy
Lavender Gray
#C4C3D0
Click to copy
Lavender Purple
#967BB6
Click to copy
Light Purple
#B19CD9
Click to copy
Pale Purple
#FAE6FA
Click to copy
Pastel Purple
#B39EB5
Click to copy
Purple Heart
#69359C
Click to copy
Russian Violet
#32174D
Click to copy
Ultra Violet
#5F4B8B
Click to copy
Veronica
#A020F0
Click to copy
Dark Purple
#301934
Click to copy
Deep Purple
#36013F
Click to copy
Brand
Yahoo Purple
#720E9E
Click to copy
Brand
Hallmark Purple
#452C63
Click to copy
Brand
Roku Purple
#662D91
Click to copy
Brand
Twitch Purple
#9146FF
Click to copy
Brand
FedEx Purple
#4D148C
Click to copy
Brand
Cadbury Purple
#7B2C8B
Click to copy
Sport
Rockies Purple
#33006F
Click to copy
Sport
Suns Purple
#1D1160
Click to copy
Sport
Lakers Purple
#552583
Click to copy
Sport
Vikings Purple
#4F2683
Click to copy
Sport
Ravens Purple
#241773
Shades of Purple — Hex Reference Table
Click any hex code or colour swatch to copy it to your clipboard.
| Preview | Name | Hex Code | RGB | Category |
|---|
How to Use Shades of Purple in CSS
Every shade on this page can be used directly in CSS. Copy the hex code and paste it into any CSS color property: color, background-color, border-color, box-shadow, or outline-color.
For transparency effects, convert the hex to RGB using the table above and use rgba(). For a design system, store your chosen shade as a CSS custom property so you can update it site-wide from one place.
/* Purple heading */
h1 { color: #800080; }
/* Lavender background */
.card { background-color: #E6E6FA; }
/* Violet with transparency */
.overlay { background-color: rgba(128, 0, 128, 0.15); }
/* CSS custom property */
:root { --brand-purple: #9146FF; }
Frequently Asked Questions
What is the hex code for purple?
The standard purple hex code in HTML/CSS is
#800080. Violet is #EE82EE, indigo is #4B0082, lavender is #E6E6FA, and plum is #DDA0DD.What are the different shades of purple called?
Shades of purple include violet, lavender, indigo, plum, lilac, orchid, amethyst, mauve, magenta, periwinkle, wisteria, mulberry, byzantium, and heliotrope — each with a distinct hex code.
What is the difference between purple and violet?
Purple (
#800080) is a mix of red and blue. Violet (#EE82EE) is a spectral colour, closer to blue. In design they are often used interchangeably.What are the darkest shades of purple?
The darkest purples include Russian violet (
#32174D), dark purple (#301934), deep purple (#36013F), and byzantium (#702963).How do I use purple shades in CSS?
Use hex codes:
color: #800080; for purple, or background-color: #E6E6FA; for lavender. CSS named purples include purple, violet, indigo, plum, thistle, lavender, and orchid.