Violet Background
#7F00FF · rgb(127, 0, 255)
About the violet background
Violet (#7F00FF) is the last color the eye sees before ultraviolet — maximum blue with full red behind it. It's electric, mystical and modern: AI products, crypto, gaming and anything that wants to feel like the future.
As a background it's dark enough for white text at about 6.3:1, and it's the canonical endpoint of the purple-to-blue gradients that define contemporary tech branding.
What to use a violet background for
- AI, crypto and gaming brand backgrounds
- Vivid purple-to-blue tech gradients
- Mystical, cosmic and fantasy themes
- High-energy accent sections
How to use violet in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page violet background */
body {
margin: 0;
background-color: #7F00FF;
}
/* A single section or element */
.hero {
background-color: rgb(127, 0, 255);
} Violet shades and tints
Click any swatch to copy it. Tints mix violet with white; shades mix it with black.
Violet background FAQ
What's the difference between violet and purple?
Spectral violet #7F00FF leans blue and glows electrically; CSS purple #800080 is a darker, redder, more muted shade. In practice violet feels neon and futuristic, purple feels regal and classic.
Is white text readable on violet?
Yes — white on #7F00FF measures about 6.3:1, comfortably above WCAG AA, making violet a rare vivid color that supports accessible body text.
What is the hex code for violet?
Violet is #7F00FF in hexadecimal, rgb(127, 0, 255) in RGB and hsl(270, 100%, 50%) in HSL. Paste #7F00FF into any CSS background-color property to use it.
How do I set a violet background in CSS?
Add background-color: #7F00FF; to any element, or apply it to the whole page: body { background-color: #7F00FF; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(127, 0, 255) — with identical results.