Pure black vs near-black: #000, #0a0a0a and OLED

"Black" in web design is almost never #000000 in practice. The hex values that ship in real product UIs cluster between #0a0a0a and #181818, and the difference between those and pure black is bigger on screen than it sounds in writing. This page lays out the difference and gives you a short list of values to use.

The five values worth knowing

For most interfaces, #0a0a0a – #121212 is the page surface; #181818 – #1f1f1f is a card on top of that surface; pure black is reserved for hero blocks, video letterboxing or genuine "the screen is off" moments.

Why not pure black for body text?

On an emissive display (every modern screen except certain matte e-ink readers) a fully white glyph on a fully black background creates a halo effect known as halation. The bright pixels in the glyph "spill" into the user's perception of the surrounding dark pixels, fattening the strokes of the letter. Two consequences:

• Long-form reading becomes tiring quicker than it does on near-black.
• Light type weights (200/300) lose their crispness; serifs in particular smear.

Dropping the background lightness by a few percent — to #0a0a0a or #121212 — and the foreground from #fff to something around #e8e8e8 reduces the maximum local contrast just enough to remove the halation while still passing the WCAG AA contrast requirement of 4.5:1 for body text. (See the web design page for the contrast story in full.)

OLED: where pure black does win

OLED panels emit their own light per pixel; pixels asked for #000000 turn off entirely. Three effects follow:

1. Power. Fewer lit pixels means lower draw, especially at high brightness. The benefit is real on phones at full brightness and negligible elsewhere.
2. True blacks. Empty pixels show as the absence of light, which gives near-infinite contrast in dark-room conditions. This is why home cinema enthusiasts care about OLED.
3. Smearing on motion. Pixels switching from off to on can lag, which is visible on rapidly scrolling lists with pure-black backgrounds.

If you specifically want the OLED battery and contrast benefit — typically for an app's "true black" theme or a phone wallpaper — use #000000. If you do not need that benefit, use a near-black: pixels are very nearly as efficient at #0a0a0a, and the visual issues above go away.

Banding: why flat black sometimes looks blotchy

A perfectly flat dark gradient on an 8-bit display can show visible "stairs" where the colour transitions. The display has only 256 levels per channel; smooth transitions between similar near-black values can land on the same level for several rows of pixels in a row. The result is a banded look, especially after JPEG or H.264 compression for video.

Two fixes:

• Add a tiny amount of grain. The generator's grain control at 5–15% breaks up the bands by jittering values just enough that the dithered transitions look smooth. This is why Netflix, modern games and well-engineered dark themes all add subtle grain to flat black.
• Avoid encoding flat black to JPEG. Use PNG for static images; for video, prefer 10-bit codecs where available.

CSS recipes

Solid background

body {
  background-color: #0a0a0a;
  color: #e8e8e8;
}

Dark page surface with slightly lighter cards

:root {
  --bg: #0a0a0a;
  --surface: #181818;
  --text: #e8e8e8;
  --muted: #a8a8a8;
}
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); border-radius: 8px; padding: 1.25rem; }

Linear gradient (top to bottom)

.bg-fade {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
}

Radial gradient with vignette

.bg-vignette {
  background:
    radial-gradient(ellipse at center, #1a1a1a 0%, #000000 100%);
}

Respect system dark mode

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #e8e8e8;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --text: #1a1a1a;
  }
}

A worked decision

You are designing a portfolio landing page. Two options for the page surface:

1. Pure black #000. Heavy, cinematic, premium-feeling. Photo thumbnails on it look like prints in a gallery.
2. Near-black #0a0a0a. Identical at first glance; subtly easier to read the project descriptions sitting under each photo.

If the page is dominated by photography and copy is short, pure black is fine and arguably better. If there are paragraphs of context under each photo, switch to #0a0a0a and the work suffers no aesthetic penalty.

Common mistakes

1. Using #000 with #fff for everything. The strongest contrast is not the most readable contrast on an emissive screen.
2. Calling near-black "grey". #0a0a0a is perceptually black; the audience reads it as black, not as a colour decision.
3. Picking a dark surface and dark cards with the same value. Cards need ~5–8% more lightness than the page surface to register as a separate plane.
4. Forgetting accent colours need to lift. A blue link that reads on white at #0066cc needs to be lighter on dark — try around #4ea3ff.
5. Banding on a flat dark hero. Add a grain layer rather than reaching for a darker hex. The grain and banding page explains why; CSS gradients covers stop placement that avoids the worst of the banding region.

What to do next

Open the generator, push the lightness slider to a low value, and compare 0 (pure black) against 5 and 10 percent. The decision is usually made in that first comparison. From there, add the right pattern, decide the export resolution, and read about black backgrounds in web design if the asset is going onto a real product. For OLED-specific wallpaper choices, the wallpapers page goes deeper.

Last reviewed on 28 April 2026.