27 Shades of Purple with Hex Codes

Named Purple Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Purple Color Chart: Hex, RGB, HSL & CMYK

Every purple above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Purple Scale from Light to Dark

A 12-step lightness scale built from the core purple hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate purple design tokens.

What Purple Communicates

Purple historically signalled royalty because the dye was expensive, and the association stuck. Today it reads as creative, premium, and slightly unconventional — which is why it is common in design tooling and AI products and rare in banking. Deep purples hold enough contrast for text on white; pale lilacs almost never do.

Where purple works well

• Creative tools, design software, and AI products
• Premium tiers and highlight accents that need to feel distinct from blue
• Beauty and wellness brands using soft lilac and lavender
• Gradients, where purple sits naturally between blue and pink

Colors that pair with purple

Copy the Purple Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --purple-indigo: #4B0082;
  --purple-tyrian-purple: #66023C;
  --purple-byzantium: #702963;
  --purple-purple: #800080;
  --purple-darkslateblue: #483D8B;
  --purple-eggplant: #614051;
  --purple-darkmagenta: #8B008B;
  --purple-rebeccapurple: #663399;
  --purple-grape: #6F2DA8;
  --purple-ultra-violet: #5F4B8B;
  --purple-darkviolet: #9400D3;
  --purple-blueviolet: #8A2BE2;
  --purple-royal-purple: #7851A9;
  --purple-darkorchid: #9932CC;
  --purple-slateblue: #6A5ACD;
  --purple-mediumslateblue: #7B68EE;
  --purple-amethyst: #9966CC;
  --purple-mediumorchid: #BA55D3;
  --purple-mediumpurple: #9370DB;
  --purple-orchid: #DA70D6;
  --purple-violet: #EE82EE;
  --purple-wisteria: #C9A0DC;
  --purple-plum: #DDA0DD;
  --purple-digital-lavender: #C8B7C9;
  --purple-mauve: #E0B0FF;
  --purple-thistle: #D8BFD8;
  --purple-lavender: #E6E6FA;
}

Purple Color Questions