Black Background
#000000 · rgb(0, 0, 0)
About the black background
Black (#000000) is the absence of light: every channel switched off. It's the highest-drama background a screen can show — white text on black measures the maximum possible WCAG contrast of 21:1 — and the standard canvas for photography, cinema and dark UI.
On OLED displays a solid black background is also the free one: pixels showing true black are completely off, saving battery and eliminating glare in dark rooms. That's why black is the default for night mode and AMOLED-optimized interfaces.
What to use a black background for
- Dark mode interfaces and AMOLED battery savings
- Photography, film and portfolio backdrops
- Luxury and premium brand presentation
- Dead pixel and backlight bleed testing
How to use black in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page black background */
body {
margin: 0;
background-color: #000000;
}
/* A single section or element */
.hero {
background-color: rgb(0, 0, 0);
} Black shades and tints
Click any swatch to copy it. Tints mix black with white; shades mix it with black.
Black background FAQ
Does a black background really save battery?
On OLED and AMOLED screens, yes — black pixels are literally powered off, so a solid black background can measurably extend battery life. On LCD panels the backlight stays on regardless, so the saving is close to zero.
Is white text on black accessible?
Yes — it's the maximum 21:1 contrast ratio. The only caveat is 'halation': some readers with astigmatism find pure white on pure black harder to read than off-white on charcoal, so consider slightly softened values for long-form text.
What is the hex code for black?
Black is #000000 in hexadecimal, rgb(0, 0, 0) in RGB and hsl(0, 0%, 0%) in HSL. Paste #000000 into any CSS background-color property to use it.
How do I set a black background in CSS?
Add background-color: #000000; to any element, or apply it to the whole page: body { background-color: #000000; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(0, 0, 0) — with identical results.