Shades of Purple: Color Names & Hex Codes
There are 8 CSS named colors in the purple range, from the lightest, Lavender, to the darkest, Indigo. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Purple Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Rebecca Purple
Strong, medium-dark purple added to CSS in 2014.
Light, Mid-tone and Dark Shades of Purple
Light shades of purple
Pale enough to work as backgrounds. Black text has the higher contrast on all 3 of them. Lavender, Plum and Violet.
Mid-tone shades of purple
Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text has the higher contrast on all 2 of them. Orchid and Medium Purple.
Dark shades of purple
Deep tones for headers, buttons and bold brand color. White text has the higher contrast on all 3 of them. Rebecca Purple, Purple and Indigo.
Purple Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) | 17.06:1 | 1.23:1 | Black | |
#DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 75%) | 10.15:1 | 2.07:1 | Black | |
#EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) | 9.06:1 | 2.32:1 | Black | |
#DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) | 7.27:1 | 2.89:1 | Black | |
#9370DB | rgb(147, 112, 219) | hsl(260, 60%, 65%) | 5.58:1 | 3.76:1 | Black | |
#663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) | 2.5:1 | 8.41:1 | White | |
#800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | 2.23:1 | 9.42:1 | White | |
#4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) | 1.62:1 | 12.95:1 | White |
Shades of Purple FAQ
What are the shades of purple in CSS?
CSS Color 4 does not group its named colors into families, but 8 of them fall in the purple range. From lightest to darkest: Lavender (#E6E6FA), Plum (#DDA0DD), Violet (#EE82EE), Orchid (#DA70D6), Medium Purple (#9370DB), Rebecca Purple (#663399), Purple (#800080) and Indigo (#4B0082).
What is the hex code for purple?
The CSS named color purple is #800080, which is RGB(128, 0, 128). The other shades on this page each have their own code.
Which shade of purple can I use for text on a white background?
Rebecca Purple, Purple and Indigo are the only ones of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Indigo reaches 12.95:1.
Are lilac and mauve CSS colors?
No. Lilac and mauve are common names, not CSS named colors, so neither has a standard hex code. Plum (#DDA0DD), Orchid (#DA70D6) and Lavender (#E6E6FA) are nearby CSS colors.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).