Purple Color

CSS purple #800080 — equal red and blue at half intensity.

Purple

#800080

HEX: #800080
RGB: rgb(128, 0, 128)
HSL: hsl(300, 100%, 25.1%)
HSV: hsv(300, 100%, 50.2%)
CMYKapproximation: cmyk(0%, 100%, 0%, 50%)
CSS name: purple

Open purple in the color picker to adjust it or copy other formats.

About purple

#800080 is the CSS named color purple, one of the original 16 HTML colors: red and blue at 128 and no green, which makes it a half-intensity magenta.

CSS has several other purples. rebeccapurple (#663399) was added in CSS Color Level 4 in memory of Rebecca Meyer, the daughter of CSS pioneer Eric Meyer. mediumpurple (#9370DB) and blueviolet (#8A2BE2) are lighter and bluer.

#800080 is the value of the CSS named color purple, defined in the CSS Color specification and identical in every browser.

Other colors called purple

Rebecca purple (CSS) #663399A bluer purple added in CSS Color Level 4.
Medium purple (CSS) #9370DBA lighter, lavender-leaning purple.

Purple shades and tints

Shades mix purple with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with purple

Color harmonies based on the hue of #800080: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Purple contrast and readability

On a purple background, white text reads best (9.41:1). Here is how purple works as a text color:

#800080 on white

9.41:1

Normal text sample

Large text

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

#800080 on black

2.22:1

Normal text sample

Large text

AA normal text (4.5:1)Fail
AA large text (3:1)Fail
AAA normal text (7:1)Fail
AAA large text (4.5:1)Fail

Purple is dark enough for white text and for text on white. Lighter tints make gentle backgrounds for highlights and tags.

Using purple in CSS and HTML

CSS custom property

:root {
  --color-purple: #800080;
}

.highlight {
  background-color: var(--color-purple);
}

Background and text color

.banner {
  background-color: purple;
  color: #ffffff;
}

.label {
  color: #800080;
  border: 2px solid rgb(128, 0, 128);
}

Inline style in HTML

<p style="background-color: #800080; color: #FFFFFF;">
  Purple background
</p>