What are the main shades of purple?

From lightest to darkest: lavender and lilac at the pale end, orchid and amethyst in the middle, then royal purple, byzantium, plum and eggplant. They differ in lightness and hue at once, which is why a single purple swatch never covers the range.

What is the hex code for purple?

CSS defines purple as #800080, a dark magenta-leaning shade that is rarely the one people mean. Most modern interfaces use something closer to #8549BA or #A061DA, bright enough to work as an accent.

What is the difference between purple and violet?

Violet is a single wavelength of light near blue, around hue 260 to 275. Purple is a mixture of red and blue with no single wavelength, spanning roughly 270 to 320. Violet reads cooler and bluer, purple warmer and more magenta.

What colors go well with purple?

Yellow and gold are the direct complement and give the strongest contrast. Blue or magenta keeps things analogous and calm, and warm neutrals such as cream, sand and taupe soften purple without competing.

Shades of purple: color palettes and hex codes

Palettes built around purple. Click any swatch to copy its hex code.

Purple runs from the palest lavender to a near-black eggplant, and the shade decides the message: the light end reads soft and floral, the dark end expensive and serious. CSS defines purple as #800080, though most interfaces use something brighter, the scale below starts from #8E4EC6.

Purple hex, RGB, HSL and OKLCH

#8E4EC6

HEX: #8E4EC6
RGB: rgb(142, 78, 198)
HSL: hsl(272, 51%, 54%)
OKLCH: oklch(55.6% 0.183 305.9)
On white: 5.18:1
On black: 4.06:1

Shades of purple

9 steps from one base color, generated in OKLCH so each step is an equal perceived step rather than an equal numeric one. Click a swatch to copy it.

Purple color values

#8E4EC6rgb(142, 78, 198)

Color spaces of #8e4ec6
RGB	142	78	198
HSL	272°	51%	54%
HSV	272°	61%	78%
CMYK	0.28	0.61	0.00	0.22
XYZ	24.0706	15.2770	55.0958
Yxy	15.2770	0.2549	0.1618
CIE-Lab	46.0112	49.0491	-52.4576
Hunter Lab	39.0858	41.5273	-56.2159
OKLCH	55.6%	0.183	305.9°

#8E4EC6 is 142 red, 78 green and 198 blue. Its blue channel carries the most of it. The nearest of the 216 web safe colors is #9966CC.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	10001110	01001110	11000110
Octal	216	116	306
Decimal	142	78	198
Hex	8E	4E	C6

#8e4ec6 mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#8E4EC6
#7F46B2
#713E9E
#63368A
#552E76
#472763
#381F4F
#2A173B
#1C0F27
#0E0713
#000000

#8e4ec6 mixed with white

The tint ramp, by the same rule in the other direction.

#8E4EC6
#995FCB
#A471D1
#AF83D7
#BB94DC
#C6A6E2
#D1B8E8
#DDC9ED
#E8DBF3
#F3EDF9
#FFFFFF

Channel shares

Red34.0%
Green18.7%
Blue47.4%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#8E4EC6
#5F8100

Triadic

#8E4EC6
#A36200
#00857C

Analogous

#8E4EC6
#B03D9B
#5A62DB

Monochromatic

#210038
#470071
#6B279E
#8E4EC6
#B374EF
#D1A6FF
#EBDBFF

#8e4ec6 on black and on white

The quick brown fox jumps over the lazy dog. 4.06:1

The quick brown fox jumps over the lazy dog. 5.18:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #8e4ec6

color: #8e4ec6;
background-color: #8e4ec6;
border: 3px solid #8e4ec6;
box-shadow: 1px 1px 3px 2px #8e4ec6;
text-shadow: 4px 4px 2px rgba(142, 78, 198, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(55.6% 0.183 305.9);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands it.

Named shades and close relatives

Purple, violet and magenta

These get used interchangeably and are not the same thing. Violet is a single wavelength at the end of the visible spectrum and sits nearer blue, around hue 260 to 275. Purple has no single wavelength. It is what the eye reports when red and blue arrive together, and covers roughly 270 to 320. Past 320 the color reads as magenta or fuchsia.

The boundary matters in practice. Anything below hue 255 is tagged blue on this site and anything above 300 pink, so a palette listed here measures as purple rather than merely being called it.

Where purple works

Beauty and fragrance packaging, wellness and meditation apps, wine and spirits labels, fantasy and mystery covers, and technology brands wanting to look creative rather than corporate. Deep purples read as luxury, pale ones as calm.

Yellow and gold are the direct complement and give the strongest contrast. For something calmer, an analogous scheme with blue or magenta stays in the family, and warm neutrals, cream, sand, taupe, soften purple without competing with it. The one place it struggles is food, outside berries and aubergine, where it tends to read as artificial.

Contrast and readability

Purple on white measures 5.18:1 and on black 4.06:1. WCAG AA asks for 4.5:1 on normal text and 3:1 on large text and UI components, so the higher of those two decides which background it belongs on. In the scale above, 500 is the first to clear 4.5:1 on white, at 5.74:1.

The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.

Purple color questions

What are the main shades of purple?: From lightest to darkest: lavender and lilac at the pale end, orchid and amethyst in the middle, then royal purple, byzantium, plum and eggplant. They differ in lightness and hue at once, which is why a single purple swatch never covers the range.
What is the hex code for purple?: CSS defines purple as #800080, a dark magenta-leaning shade that is rarely the one people mean. Most modern interfaces use something closer to #8549BA or #A061DA, bright enough to work as an accent.
What is the difference between purple and violet?: Violet is a single wavelength of light near blue, around hue 260 to 275. Purple is a mixture of red and blue with no single wavelength, spanning roughly 270 to 320. Violet reads cooler and bluer, purple warmer and more magenta.
What colors go well with purple?: Yellow and gold are the direct complement and give the strongest contrast. Blue or magenta keeps things analogous and calm, and warm neutrals such as cream, sand and taupe soften purple without competing.

Related colors: lavender, violet, lilac, plum, indigo, eggplant. See every shade on the colors index.

#D79400

#00ACAA

#C686D9

#A38600

#DAC5E8

#C8A6CA

#C97BAA

#967381

#D3CDE2

#DAD4E9

#DFDBF2

#E7E1FD

#160E2E

#301F4F

#4D3565

#66536D

#73B993

#91C8B4

#C99AE3

#D89BA4

#4B3F4D

#432546

#321430

#1E0918

#F7A669

#67C692

#74CBFF

#DD9BFD

#9BE5CC

#AB8ADD

#CF7257

#87B7B3

#EFDEC4

#CAE6E9

#D8C5EA

#ECE2BC

#EFCCFF

#F69D00

#00CEE3

#EC86E1

#81BC42

#86D3FF

#DDB9FF

#FFB4AE

#E8DBF2

#E9DAE7

#CCCFA4

#C9E0D1

#E6B2FF

#FFBDF3

#D0C923

#00F69B

#E4CAF7

#C6A5DD

#9D8CA9

#846891

#F8E3F5

#F3D9F3

#EBD0EC

#E2C9E3

#5F3B91

#BB99D6

#4A6600

#2F7A1D

#B0BFDC

#D1D2FF

#BFA9E7

#CFBCD2

#2C1D32

#3B2839

#5C5171

#213625

#629582

#61908A

#765B83

#BA7F84

#F87940

#92AD43

#36B2DA

#BE66C2

#58D091

#7DCDB8

#B48EC9

#F1A0BA

#2C512B

#54CA95

#C992D4

#DE7CCD

#F8AD00

#D7BC0B

#68D3F6

#9C76D5

#FFCF90

#00D8DE

#CEA1FF

#E6C05B