Nobody's background is actually #ffffff
Pure white is a default, not a decision. Look at the products you admire and almost none of them use it. Here is what they use instead and why.
↑ Click any of these to repaint the entire site with it.
Open the site of any product with a design budget and sample the background. It will not be #ffffff.
The differences are tiny — a few points of lightness, a trace of chroma. And they are the difference between an interface that feels considered and one that feels like a browser default, which is exactly what #ffffff is.
What pure white does wrong#
It is brighter than paper. A sheet of white office paper under normal indoor light reflects around 80% of it. A screen at #ffffff is emitting at 100% of its capability, straight into your eye. In a dim room that is genuinely uncomfortable, and it is a large part of why people who read a lot at night reach for dark mode.
It has no temperature. Every physical white surface has a cast — the paper stock, the light in the room, the wall it is reflecting. A perfectly neutral white is an absence of information, and the eye reads absences as cheap.
It leaves you no headroom. If the page is #ffffff, a card that sits on the page has nowhere lighter to go. You end up separating surfaces with borders and shadows only, which is why so many light themes look like a wireframe: everything is the same color and the structure is carried entirely by hairlines.
That last one is the practical argument. Move the page to #f8fafc and cards can be #ffffff. Suddenly elevation is free, borders can get quieter, and the whole thing gains depth without a single shadow.
How far to move#
Not far. This is a domain where the useful range is very small.
- Lightness 95–98%. Below 95% it starts reading as gray rather than as white-with-character. Above 98% you have not really moved.
- Chroma 0.002–0.012 in OKLCH. Above about 0.015 people start describing it as "the cream one" or "the blue one", which means it has stopped being a neutral and started being a color. That may be what you want, but know which one you are doing.
/* Warm — reads as paper, print, editorial, calm */
--bg: oklch(98.2% 0.006 85);
/* Cool — reads as technical, clinical, screen-native */
--bg: oklch(98.4% 0.005 250);
/* Neutral, but not zero */
--bg: oklch(98% 0.002 0);Warm or cool#
There is no rule, but there is a strong tendency.
Warm off-whites (hue 60–100) read as paper, ink and print. They suit long-form reading, editorial layouts, anything that wants to feel considered and physical. They photograph well. They are forgiving of serif type.
Cool off-whites (hue 220–270) read as screen, glass and precision. They suit dashboards, developer tools, anything data-dense. They make blues sit more comfortably, which matters because most product UI is blue.
The one thing to avoid is mixing them. A warm page background under a cool card surface produces a subtle wrongness that people notice without being able to name — and once you know to look for it you will find it in a lot of shipped interfaces.
The same argument applies to black#
Everything above holds in reverse. #000000 is not a background either.
Pure black on an OLED display switches pixels fully off, which produces visible smearing when content scrolls across the boundary. It also maximises halation around light text — the glyphs appear to bloom and thicken, which is genuinely tiring to read.
Dark backgrounds in the wild sit between 8% and 18% lightness, usually with a hue:
Try it on this page#
The background you are reading this on is whatever you last picked. If you have not picked one, it is the default.
Open the background picker and set it to #ffffff. Then set it to #fbfaf7. The difference on a swatch is nearly invisible; the difference across a full page of text, cards and borders is not subtle at all.
That gap — between how a color looks as a square and how it looks as an environment — is the reason this site themes itself from your choice instead of showing you a preview rectangle.