Purple Color Code: HEX, RGB, 30 Shades of Purple and Palettes

The purple color code is #800080, which is RGB 128, 0, 128. That’s the official CSS purple, a deep, medium purple made of equal parts red and blue. In CSS you can simply write purple. Older X11 color lists, still used by some software, define purple as the brighter #A020F0 (RGB 160, 32, 240), which leans toward violet.

This guide covers the HEX, RGB, CMYK and HSL values for both, 30 named shades of purple with their codes, six purple color palettes and quick steps for using purple in Canva, Photoshop and CSS.

Shades marked CSS are official CSS color keywords. The other names use the hex values listed in common color references such as Wikipedia’s color lists. CMYK figures are simple conversions from RGB, so check them against a printed proof before a big print run.

Purple Color Code Values at a Glance

Most designers mean #800080 when they say purple. Reach for X11 purple when you want something brighter and more electric.

Format	Purple (CSS)	Purple (X11)
HEX	#800080	#A020F0
RGB	128, 0, 128	160, 32, 240
CMYK	0, 100, 0, 50	33, 87, 0, 6
HSL	300°, 100%, 25%	277°, 87%, 53%
HSV	300°, 100%, 50%	277°, 87%, 94%
CSS	purple or #800080	#A020F0

Which Purple Should You Use?

Purple runs from soft lavender to near-black aubergine. Choose the shade by what it has to do:

• #800080 (purple) is a classic, balanced purple for headings, buttons and bold brand colors.
• #663399 (rebeccapurple) is a softer, bluer purple that’s easy on the eyes. It became a CSS color name in 2014 in memory of Rebecca Meyer, the young daughter of CSS expert Eric Meyer.
• #9370DB (medium purple) and #967BB6 (lavender purple) suit friendly, modern designs.
• #E6E6FA (lavender), #D8BFD8 (thistle) and #E0B0FF (mauve) make soft, airy backgrounds.
• #301934 (dark purple) and #614051 (eggplant) are deep enough for text and dark-mode designs.

Purple vs Violet: What’s the Difference?

Purple and violet aren’t quite the same thing. Violet is a real color in the light spectrum, at the short-wavelength end beyond blue. Purple is a mix of red and blue light, so it has no single wavelength of its own. In CSS, violet (#EE82EE) is actually a light, pinkish purple, which surprises a lot of people.

Shades of Purple With Hex Codes

These 30 shades of purple cover the whole family, from pale lavender and lilac to deep indigo and eggplant. Copy any hex code and paste it into your design tool.

Shade	HEX	RGB	CMYK
Purple (CSS)	#800080	128, 0, 128	0, 100, 0, 50
Purple (X11)	#A020F0	160, 32, 240	33, 87, 0, 6
Rebecca purple	#663399	102, 51, 153	33, 67, 0, 40
Indigo	#4B0082	75, 0, 130	42, 100, 0, 49
Dark violet	#9400D3	148, 0, 211	30, 100, 0, 17
Dark orchid	#9932CC	153, 50, 204	25, 75, 0, 20
Dark magenta	#8B008B	139, 0, 139	0, 100, 0, 45
Medium purple	#9370DB	147, 112, 219	33, 49, 0, 14
Blue violet	#8A2BE2	138, 43, 226	39, 81, 0, 11
Medium orchid	#BA55D3	186, 85, 211	12, 60, 0, 17
Orchid	#DA70D6	218, 112, 214	0, 49, 2, 15
Violet	#EE82EE	238, 130, 238	0, 45, 0, 7
Plum	#DDA0DD	221, 160, 221	0, 28, 0, 13
Thistle	#D8BFD8	216, 191, 216	0, 12, 0, 15
Lavender (CSS)	#E6E6FA	230, 230, 250	8, 8, 0, 2
Lavender (floral)	#B57EDC	181, 126, 220	18, 43, 0, 14
Lavender purple	#967BB6	150, 123, 182	18, 32, 0, 29
Amethyst	#9966CC	153, 102, 204	25, 50, 0, 20
Grape	#6F2DA8	111, 45, 168	34, 73, 0, 34
Electric purple	#BF00FF	191, 0, 255	25, 100, 0, 0
Heliotrope	#DF73FF	223, 115, 255	13, 55, 0, 0
Mauve	#E0B0FF	224, 176, 255	12, 31, 0, 0
Lilac	#C8A2C8	200, 162, 200	0, 19, 0, 22
Byzantium	#702963	112, 41, 99	0, 63, 12, 56
Eggplant	#614051	97, 64, 81	0, 34, 16, 62
Palatinate purple	#682860	104, 40, 96	0, 62, 8, 59
Mulberry	#C54B8C	197, 75, 140	0, 62, 29, 23
Pearly purple	#B768A2	183, 104, 162	0, 43, 11, 28
Mardi Gras	#880085	136, 0, 133	0, 100, 2, 47
Dark purple	#301934	48, 25, 52	8, 52, 0, 80

Fourteen of these are official CSS color names: purple, rebeccapurple, indigo, darkviolet, darkorchid, darkmagenta, mediumpurple, blueviolet, mediumorchid, orchid, violet, plum, thistle and lavender. Two of them look nothing like their names suggest. CSS plum (#DDA0DD) is a pale pink-purple rather than the dark fruit, and CSS lavender (#E6E6FA) is almost white. For the flower’s color, use lavender (floral) #B57EDC.

Dark Purple Color Codes

For deep purples, try dark purple #301934, indigo #4B0082, eggplant #614051, palatinate purple #682860 or byzantium #702963. They work as rich backgrounds behind gold or white text, and as text colors on light backgrounds.

Light Purple Color Codes

For light purples, use lavender #E6E6FA, thistle #D8BFD8, mauve #E0B0FF, lilac #C8A2C8 or plum #DDA0DD. These sit in pastel territory, so our pastel color codes list has more shades that pair with them.

Purple Color Palettes (With Hex Codes)

Purple works with warm golds, cool teals and soft pinks, so it’s easy to build a palette around. Here are six purple color palettes ready to copy:

Palette	Hex codes	Good for
Royal purple and gold	#301934, #663399, #D4AF37, #F7E7CE, #FFFFFF	Luxury brands, invitations and awards
Lavender pastel	#E6E6FA, #D8BFD8, #C8A2C8, #B57EDC, #FDFBFF	Spas, baby showers and spring designs
Purple and yellow	#4B0082, #800080, #FFDB58, #FFFACD, #FFFFFF	Bold posters, sports and kids’ brands
Purple and teal	#301934, #6F2DA8, #2A9D8F, #A8DADC, #F1FAEE	Tech, apps and modern websites
Plum and blush	#614051, #702963, #C54B8C, #F4C2D7, #FFF0F5	Beauty, fashion and wine labels
Electric neon	#0F0A1E, #2D1B69, #8A2BE2, #BF00FF, #E0B0FF	Gaming, music and stream graphics

Purple and gold is one of the oldest luxury pairings, and our luxury color palettes and gold color code guide have more combinations like it.

What Colors Go With Purple?

• Yellow and gold: yellow sits opposite purple on the color wheel, so it gives the strongest contrast. Our yellow color code guide lists 30 yellows to try.
• Teal and turquoise: a cool, fresh pairing for tech and modern brands. See our turquoise guide for codes.
• Pink and blush: soft and romantic, popular for beauty and weddings. Our feminine colors guide has palettes built on this mix.
• Gray, white and black: neutral partners that let purple be the star.
• Sage green: lavender and sage is a calm, garden-inspired combination.

How to Use the Purple Color Code in Canva, Photoshop and CSS

1. Canva: select your text or shape, click the color tile on the toolbar, choose the plus icon to add a new color and paste #800080 into the hex field.
2. Photoshop: click the foreground color swatch, type 800080 into the # field of the Color Picker and select OK.
3. CSS: write color: #800080; or color: purple;. For the softer shade, use color: rebeccapurple;.
4. Brand kits: save each purple with its RGB and CMYK values so your website, social posts and print all match.

Make Sure Purple Text Is Readable

Deep purples make very readable text. Light purples don’t. Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Here’s how common purple pairings score:

Text color	Background	Contrast ratio	Normal text
#800080 purple	#FFFFFF white	9.4:1	Passes
#A020F0 X11 purple	#FFFFFF white	5.3:1	Passes
#B57EDC lavender	#FFFFFF white	3:1	Large text only
#FFFFFF white	#9370DB medium purple	3.8:1	Large text only
#D4AF37 metallic gold	#301934 dark purple	7.6:1	Passes
#301934 dark purple	#E6E6FA lavender	13:1	Passes

The takeaway: dark and medium purples are safe on white. Light purples need dark text, and white text on medium purple only works at large sizes, like big headlines.

What Does the Color Purple Mean?

For centuries, purple dye was rare and expensive. Tyrian purple was made from sea snails, so only the very rich could afford it, and purple became tied to royalty, power and wealth. Today it also suggests creativity, imagination and a touch of mystery. Light purples like lavender feel calm and gentle, while bright purples feel playful and energetic. That range is why purple shows up in beauty, wellness and tech branding alike.

Want more color codes? Our brown color code and hot pink guides include shades that work next to purple.

Frequently Asked Questions