Magenta Background
#FF00FF · rgb(255, 0, 255)
About the magenta background
Magenta (#FF00FF) is a impossible-seeming color: equal maximum red and blue with no green at all. It doesn't exist as a single wavelength of light — your brain constructs it — and it's one of the four inks of CMYK printing.
On screens it's electric. That intensity makes it a favorite for neon-inspired design, and a practical tool: a full-screen magenta field is a classic test for sub-pixel defects and chroma handling in displays and video compression.
What to use a magenta background for
- Neon, rave and Y2K design aesthetics
- Display chroma and sub-pixel defect testing
- CMYK print process explanations
- High-contrast accent colors in dark UIs
How to use magenta in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page magenta background */
body {
margin: 0;
background-color: #FF00FF;
}
/* A single section or element */
.hero {
background-color: rgb(255, 0, 255);
} Magenta shades and tints
Click any swatch to copy it. Tints mix magenta with white; shades mix it with black.
Magenta background FAQ
Is magenta a 'real' color?
Physically, no single wavelength of light is magenta — it appears when red and blue cones are stimulated without green. Your visual system fills the gap, which is why it looks like a color 'between' red and violet.
What's the RGB value of magenta?
Magenta is rgb(255, 0, 255) — red and blue fully on, green fully off. It's also the CSS keyword `fuchsia`, which is the identical color under a second name.
What is the hex code for magenta?
Magenta is #FF00FF in hexadecimal, rgb(255, 0, 255) in RGB and hsl(300, 100%, 50%) in HSL. Paste #FF00FF into any CSS background-color property to use it.
How do I set a magenta background in CSS?
Add background-color: #FF00FF; to any element, or apply it to the whole page: body { background-color: #FF00FF; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 0, 255) — with identical results.