White text 9.4:1
Purple spans cool violets, deep plums and bright orchids.
Below are 33 named shades of purple with HEX, RGB, HSL and CMYK codes, sorted so you can compare them side by side.
Click to copy a code, or open any purple in the scale generator.
Mauve - lightest33 shades sorted light to darkdarkest - Dark Purple
Download all 33 shades of purple
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Purple (#800080), evenly spaced in OKLCH lightness. Paste any other purple to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#800080rgb(128, 0, 128)hsl(300, 100%, 25%)cmyk(0%, 100%, 0%, 50%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #fcf4fc;
--brand-100: #fae0f8;
--brand-200: #fac3f6;
--brand-300: #fe91fa;
--brand-400: #ff2dfe;
--brand-500: #df00df;
--brand-600: #ba00ba;
--brand-700: #9c009c;
--brand-800: #800080;
--brand-900: #650f65;
--brand-950: #3e0e3e;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Purple (#800080). Click a group to open it on the wheel.
#008000 Green
Analogous
Next-door neighbors - calm and harmonious
#400080 Indigo#800040 Claret
Triadic
Three evenly spaced hues - bold and balanced
#808000 Olive Drab#008080 Teal
Split complementary
The two neighbors of the opposite - contrast with less tension
#408000 Avocado#008040 Green
Purple has stood for royalty and luxury for thousands of years. Tyrian Purple was extracted from sea snails, and it took thousands of them to dye a single garment, so only the very rich could wear it.
That changed in 1856, when 18-year-old William Henry Perkin accidentally made mauveine, the first synthetic dye, and purple became a fashion color for everyone.
Today purple suggests creativity, imagination and a touch of mystery. Rebecca Purple (#663399) was added to CSS in 2014 in memory of Rebecca Meyer, daughter of web standards pioneer Eric Meyer.
See purple in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact purple? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Purple is #800080, which is rgb(128, 0, 128) and hsl(300, 100%, 25%). For print it is about 0% cyan, 100% magenta, 0% yellow and 50% black. It is also a CSS color keyword, so you can simply write purple in your stylesheet.
There is no fixed number - any purple can be made lighter, darker or more muted. This page lists 33 named shades, from Mauve (#E0B0FF) to Dark Purple (#301934). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any purple.
Purple (#800080) has a contrast ratio of 9.41:1 on white, which passes WCAG AAA for normal text. On black it reaches 2.22:1, so use it as text on light backgrounds, or put white text on it. Test any pair with the Contrast Checker.
Violet is a true spectral color at the short end of the rainbow, leaning blue. Purple is a mix of red and blue light that does not exist as a single wavelength. On screens, Violet (#7F00FF) looks bluer and Purple (#800080) looks redder.
Light purples include Mauve (#E0B0FF), Orchid (#DA70D6) and Heliotrope (#DF73FF). The softest, palest ones - Lilac, Wisteria, Thistle - are collected on shades of lavender.
Rebecca Purple (#663399) is a CSS named color added in 2014 to honor Rebecca Meyer, the daughter of CSS expert Eric Meyer. You can write rebeccapurple in any stylesheet.