Red Background
#FF0000 · rgb(255, 0, 0)
About the red background
Red (#FF0000) is the loudest color on the sRGB palette — 255 on the red channel and nothing else. Psychologically it signals urgency, passion and appetite, which is why it dominates sale banners, food branding and call-to-action buttons.
As a full background, pure red is intense: pair it with white or black typography for maximum punch, and use it where you want energy — launches, warnings, sports — rather than long-form reading.
What to use a red background for
- Sale banners, launches and urgency-driven marketing
- Food and beverage branding backgrounds
- Chroma-key style testing and screen calibration
- High-energy sports and esports visuals
How to use red in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page red background */
body {
margin: 0;
background-color: #FF0000;
}
/* A single section or element */
.hero {
background-color: rgb(255, 0, 0);
} Red shades and tints
Click any swatch to copy it. Tints mix red with white; shades mix it with black.
Red background FAQ
What is the RGB value of pure red?
Pure red is rgb(255, 0, 0) — the red channel fully on, green and blue off. Its HSL value is hsl(0, 100%, 50%), making it the canonical starting point of the color wheel.
What text color is readable on a red background?
White on #FF0000 measures about 4:1 — enough for large text but just under WCAG AA for body copy. Black measures about 5.3:1. For small text on red, black or a darkened shade of red behind white text is the safer choice.
What is the hex code for red?
Red is #FF0000 in hexadecimal, rgb(255, 0, 0) in RGB and hsl(0, 100%, 50%) in HSL. Paste #FF0000 into any CSS background-color property to use it.
How do I set a red background in CSS?
Add background-color: #FF0000; to any element, or apply it to the whole page: body { background-color: #FF0000; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 0, 0) — with identical results.