Purple Background
#800080 · rgb(128, 0, 128)
About the purple background
Purple (#800080) is red and blue at equal half-strength — rgb(128, 0, 128) — the historical color of royalty because purple dye once cost more than gold. Today it signals creativity, wisdom and premium quality.
White text on purple measures about 9.4:1 — comfortably accessible — and lavender, gold or mint accents turn it into a distinctive brand palette.
What to use a purple background for
- Creative tools and community branding
- Premium and luxury positioning
- Distinctive dark hero sections
- Gradient partner for magenta and indigo
How to use purple in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page purple background */
body {
margin: 0;
background-color: #800080;
}
/* A single section or element */
.hero {
background-color: rgb(128, 0, 128);
} Purple shades and tints
Click any swatch to copy it. Tints mix purple with white; shades mix it with black.
Purple background FAQ
What is the hex code for purple?
CSS `purple` is #800080 — rgb(128, 0, 128). Fun quirk: CSS 'purple' is actually darker than CSS 'fuchsia' and equals the traditional color 'purpura'.
Why is purple associated with royalty?
In antiquity, Tyrian purple dye required thousands of sea snails per garment, making it fabulously expensive — so sumptuary laws reserved it for rulers. The association stuck for millennia.
What is the hex code for purple?
Purple is #800080 in hexadecimal, rgb(128, 0, 128) in RGB and hsl(300, 100%, 25%) in HSL. Paste #800080 into any CSS background-color property to use it.
How do I set a purple background in CSS?
Add background-color: #800080; to any element, or apply it to the whole page: body { background-color: #800080; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(128, 0, 128) — with identical results.