Shades of Purple
Every useful purple, generated rather than hand-listed.
There are 12 named CSS colors in the purple family, ranging from Mauve (#e0b0ff) at the light end to Nightshade (#2b1b3d) at the dark end. The shades generated on this page all sit at hue 300° in OKLCH, so their lightness steps look evenly spaced instead of bunching up in the shadows the way an HSL ramp does.
Every shade of purple on this page is generated, not copied from a list. Each swatch sits at hue 300° in OKLCH with an even perceptual lightness step, so the ramp reads smoothly instead of bunching up at the dark end the way an HSL ramp does — and nothing is clipped outside what an sRGB display can actually show.
Click any swatch to copy its hex code. The sliders let you change how many shades you get, how intense they are, and how much the hue drifts across the ramp.
Three purple shades worth starting from
If you just need a purple that works, these three are safe picks at the light, mid and dark ends of the range.
| Role | Hex | RGB | Contrast on white |
|---|---|---|---|
| Light purple — backgrounds, tints | #ddcffa | rgb(221 207 250) | 1.46:1 |
| Mid purple — accents, buttons | #9065d0 | rgb(144 101 208) | 4.24:1 |
| Dark purple — text, borders | #3e1e65 | rgb(62 30 101) | 13.3:1 |
Named shades of purple
12 named colors that fall in the purple range, sorted from darkest to lightest, with the contrast ratio each one achieves against a white background. Anything below 4.5:1 is not safe for body text on white.
| Name | Hex | RGB | HSL | On white |
|---|---|---|---|---|
| Nightshade | #2b1b3d | rgb(43 27 61) | hsl(268.2 38.6% 17.3%) | 15.83:1 |
| Indigo | #4b0082 | rgb(75 0 130) | hsl(274.6 100% 25.5%) | 12.95:1 |
| Dark Slate Blue | #483d8b | rgb(72 61 139) | hsl(248.5 39% 39.2%) | 9.07:1 |
| Rebecca Purple | #663399 | rgb(102 51 153) | hsl(270 50% 40%) | 8.41:1 |
| Darkviolet | #9400d3 | rgb(148 0 211) | hsl(282.1 100% 41.4%) | 6.56:1 |
| Blue Violet | #8a2be2 | rgb(138 43 226) | hsl(271.1 75.9% 52.7%) | 5.96:1 |
| Dark Orchid | #9932cc | rgb(153 50 204) | hsl(280.1 60.6% 49.8%) | 5.7:1 |
| Slate Blue | #6a5acd | rgb(106 90 205) | hsl(248.3 53.5% 57.8%) | 5.31:1 |
| Medium Slate Blue | #7b68ee | rgb(123 104 238) | hsl(248.5 79.8% 67.1%) | 4.15:1 |
| Medium Purple | #9370db | rgb(147 112 219) | hsl(259.6 59.8% 64.9%) | 3.76:1 |
| Heather | #b7a5c6 | rgb(183 165 198) | hsl(272.7 22.4% 71.2%) | 2.28:1 |
| Mauve | #e0b0ff | rgb(224 176 255) | hsl(276.5 100% 84.5%) | 1.78:1 |
Using purple in an interface
The two badges next to each generated shade are its contrast ratio against white and against black. The first step where one of them turns green is the lightest purple you can safely set body text in on that background — everything lighter is decoration, not copy.
For large areas, pick from the light end and let a darker shade of the same hue carry the text. That keeps the whole surface in one hue family, which is what makes an interface feel deliberate rather than assembled.
Frequently asked questions
What are the hex codes for shades of purple?
The ramp at the top of this page generates them — click any swatch to copy it. Three reliable picks are #ddcffa for light, #9065d0 for mid and #3e1e65 for dark purple.
What is the hex code for purple?
The closest single answer is Dark Orchid at #9932cc, but purple is a range rather than one value. This page lists 12 named purple shades and generates as many more as you want.
How many shades of purple are there?
Effectively unlimited — an 8-bit display can show over 16 million colors, and a large share of them read as this family. The useful question is how many distinguishable steps you need, which is usually somewhere between 9 and 12 for a design system.
What colors go well with purple?
Its perceptual complement sits at hue 120°, and the two neighbors either side of that make a softer split-complementary set. The palette generator builds all of them from any starting purple.
Which shade of purple is accessible for text?
On a white background you need 4.5:1 for body text. In the table above that is every row at or above 4.5:1 — generally the darker half of the family. The contrast checker will confirm any specific pair and suggest the nearest passing color if it fails.