HCHTML Color

Shades of purple

Purple blends red's energy with blue's depth. It has long signalled luxury and creativity, and violet and indigo have become the signature colors of modern SaaS and AI products.

purple · #800080

18 purple color names

Every CSS named color in the purple family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

lavender#e6e6fargb(230 230 250)oklch(0.931 0.027 285.9)thistle#d8bfd8rgb(216 191 216)oklch(0.833 0.044 326)plum#dda0ddrgb(221 160 221)oklch(0.783 0.108 326.5)violet#ee82eergb(238 130 238)oklch(0.762 0.186 327.2)orchid#da70d6rgb(218 112 214)oklch(0.702 0.181 328.7)fuchsia#ff00ffrgb(255 0 255)oklch(0.702 0.322 328.4)mediumpurple#9370dbrgb(147 112 219)oklch(0.627 0.158 296.7)mediumorchid#ba55d3rgb(186 85 211)oklch(0.626 0.202 319.2)mediumslateblue#7b68eergb(123 104 238)oklch(0.604 0.194 285.5)slateblue#6a5acdrgb(106 90 205)oklch(0.544 0.171 285.5)darkorchid#9932ccrgb(153 50 204)oklch(0.541 0.227 311.5)blueviolet#8a2be2rgb(138 43 226)oklch(0.534 0.25 301.4)darkviolet#9400d3rgb(148 0 211)oklch(0.515 0.261 309.8)darkmagenta#8b008brgb(139 0 139)oklch(0.447 0.205 328.4)rebeccapurple#663399rgb(102 51 153)oklch(0.44 0.16 303.4)purple#800080rgb(128 0 128)oklch(0.421 0.193 328.4)darkslateblue#483d8brgb(72 61 139)oklch(0.414 0.125 286)indigo#4b0082rgb(75 0 130)oklch(0.339 0.179 301.7)

Tailwind purple scales

The Tailwind v4 default palette families closest to purple, 50 to 950.

Using purple in a UI

Purples reach very high chroma, and many vivid ones sit outside sRGB. Author them in OKLCH and let the browser clamp for older screens.

purple-colors.css
:root {
  --lavender: oklch(0.931 0.027 285.9); /* #e6e6fa */
  --thistle: oklch(0.833 0.044 326); /* #d8bfd8 */
  --plum: oklch(0.783 0.108 326.5); /* #dda0dd */
  --violet: oklch(0.762 0.186 327.2); /* #ee82ee */
  --orchid: oklch(0.702 0.181 328.7); /* #da70d6 */
  --fuchsia: oklch(0.702 0.322 328.4); /* #ff00ff */
  --mediumpurple: oklch(0.627 0.158 296.7); /* #9370db */
  --mediumorchid: oklch(0.626 0.202 319.2); /* #ba55d3 */
  --mediumslateblue: oklch(0.604 0.194 285.5); /* #7b68ee */
  --slateblue: oklch(0.544 0.171 285.5); /* #6a5acd */
  --darkorchid: oklch(0.541 0.227 311.5); /* #9932cc */
  --blueviolet: oklch(0.534 0.25 301.4); /* #8a2be2 */
  --darkviolet: oklch(0.515 0.261 309.8); /* #9400d3 */
  --darkmagenta: oklch(0.447 0.205 328.4); /* #8b008b */
  --rebeccapurple: oklch(0.44 0.16 303.4); /* #663399 */
  --purple: oklch(0.421 0.193 328.4); /* #800080 */
  --darkslateblue: oklch(0.414 0.125 286); /* #483d8b */
  --indigo: oklch(0.339 0.179 301.7); /* #4b0082 */
}
Generate a purple scaleBuild a palette

Frequently asked questions

What is the hex code for purple?
The CSS keyword purple is #800080, which is rgb(128 0 128) or oklch(0.421 0.193 328.4). Tailwind's purple-500 is #AD46FF, a softer purple that many design systems use instead.
How many shades of purple have CSS color names?
This page lists 18 CSS named colors in the purple family, from lavender (#E6E6FA) at the light end to indigo (#4B0082) at the dark end. Every one can be used directly in CSS by name.
What colors go well with purple?
Purple pairs well with yellow, green and gray. For a guaranteed match, open any purple shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a purple color scale for my design system?
Pick a purple you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenTealBluePinkBrownGrayWhite