Purple Colors
Every shade of purple in one reference — from soft lavender and lilac to violet, plum and deep aubergine. Each color shows HEX, RGB and HSL values you can copy in one click.
Purple color reference
A systematic purple scale with hex, RGB and HSL values.
| Name | HEX | RGB | HSL | |
|---|---|---|---|---|
| Purple 100 | #EDE9FE |
237, 233, 254 | 251°, 91%, 95% | |
| Purple 200 | #DDD6FE |
221, 214, 254 | 251°, 95%, 92% | |
| Purple 300 | #C4B5FD |
196, 181, 253 | 251°, 95%, 85% | |
| Purple 400 | #A78BFA |
167, 139, 250 | 255°, 92%, 76% | |
| Purple 500 | #8B5CF6 |
139, 92, 246 | 258°, 90%, 66% | |
| Purple 600 | #7C3AED |
124, 58, 237 | 262°, 83%, 58% | |
| Purple 700 | #6D28D9 |
109, 40, 217 | 263°, 70%, 50% | |
| Purple 800 | #5B21B6 |
91, 33, 182 | 263°, 69%, 42% | |
| Purple 900 | #4C1D95 |
76, 29, 149 | 263°, 67%, 35% | |
| Purple 950 | #2E1065 |
46, 16, 101 | 261°, 73%, 23% |
Named purples
Common named purples from CSS and design practice.
Complementary and harmonious colors
Purple sits at 270°–300° on the color wheel. Here are the relationships that pair well with purple.
| Relationship | Angle | Example hue |
|---|---|---|
| Complementary | 180° | Yellow-green |
| Split-complementary | 150° / 210° | Lime / Amber |
| Triadic | 120° / 240° | Green / Orange |
| Analogous | −30° / +30° | Blue / Pink |
Purple in design and accessibility
Purple sits between blue and red on the color wheel — cool when it leans towards violet, warmer when it leans towards magenta. Historically linked to royalty and luxury because the dye was expensive, purple today communicates creativity, imagination and premium quality. It is a popular anchor for tech, creative and lifestyle brands.
Common uses in interfaces
- Creative and tech brands — design tools, AI products, dev platforms.
- Luxury and premium — paired with gold, deep purple feels expensive.
- Gradients — indigo to pink and violet to cyan are among the most popular.
- Links and focus states — purple distinguishes from the default blue.
Accessibility notes
Purple contrast depends heavily on lightness. On white, a mid purple like #8B5CF6 only reaches about 4.4:1 and fails AA for body copy. Darker purples such as #6D28D9 (about 6.7:1) and #5B21B6 (about 9.1:1) pass AA and AAA comfortably. On dark backgrounds, use lighter purples — #A78BFA or #C4B5FD.
Frequently asked questions
What is the purest purple hex code?
The classical web purple is #800080 — RGB (128, 0, 128) — sitting at hue 300°. Modern design systems vary: some anchor purple closer to red (around 300°, like #8B5CF6) and others closer to blue-violet (around 270°, like #7C3AED). Both are called "purple" in practice; the choice depends on brand intent.
What colors go well with purple?
Neutrals — white, cream, dark gray, black — form a safe backdrop. Analogous partners blue and pink create a cohesive cool palette. Deep purple with gold is a classic luxury pairing. For high-contrast accents, use its complementary yellow-green sparingly — full-saturation purple-and-yellow pairs vibrate.
What is the complementary color of purple?
Yellow-green. Purple sits at 300° and yellow at 60°, which makes yellow-green (around 90°) its closest complementary. Split-complementary partners are lime and amber. In practice most designers soften this pair — muted purple with olive or ochre feels more refined than full-saturation yellow.
Is purple accessible for text?
Purple text works best in its darker variants. On white: #8B5CF6 reaches about 4.4:1 (fails AA for body copy), #6D28D9 reaches about 6.7:1 (passes AA and AAA Large), and #5B21B6 reaches about 9.1:1 (passes AAA for all text). For dark themes, use #A78BFA or lighter.
How do I generate a full purple scale?
Use our shades generator. Enter any purple as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.