Search⌘K

Backgrounds · 7 tools

Background Color Tools

One color covers more of your page than everything else combined. These are the tools for choosing it and for surviving the consequences.

A background is not a decoration, it is a constraint. Once it is fixed, the set of text colors that will pass contrast is fixed with it, the range of accents that will read as deliberate rather than accidental narrows sharply, and the whole question of light versus dark is settled. Choosing it last — after the components, after the brand color — is how interfaces end up with body copy at 3.8:1 and a primary button nobody can find.

The default of #ffffff is rarely the right answer. Pure white is the maximum a display can emit; at night on an OLED phone it is genuinely uncomfortable, and in daylight it flares. Most carefully-built interfaces sit a few percent off it, and the reason is physiological rather than aesthetic: dropping peak luminance a little reduces what the eye has to accommodate while costing almost nothing from the contrast budget.

The same logic applies at the other end. A pure black background maximises the contrast ratio on paper and produces halation in practice — light text appears to bleed into the surround, worst for readers with astigmatism. Dark interfaces people actually enjoy reading tend to start their darkest surface around 12–18% perceptual lightness and build elevation by raising lightness rather than by stacking translucent white, which drifts blue and desaturates as it layers.

All 7 backgrounds tools

Backgrounds

Background Color Picker

The main event — pick a background and watch a whole interface build itself around it.

 Backgrounds

Surface System Generator

One background in, a full elevation stack out.

 Backgrounds

Readable Text Finder

Given this background, what text color actually works?

 Backgrounds

Dark Mode Generator

Turn a light theme into a dark one that does not look inverted.

 Backgrounds

Overlay & Scrim Calculator

How dark does the scrim need to be for the text to survive?

 Backgrounds

CSS Pattern Backgrounds

Dots, grids, stripes and checks — pure CSS, no images.

 Backgrounds

Noise & Grain Generator

Kill the banding, add the film grain.

Further reading

Frequently asked questions

What is the best background color for a website?

There is no single answer, but there is a reliable range. For light interfaces, a near-white a few percent off #ffffff — around #fafafa to #f7f8fa — lowers glare without costing contrast. For dark interfaces, start near #12151a to #1a1d23 rather than pure black, which causes halation around light text. Whatever you choose, the real test is whether your body text clears 4.5:1 against it and whether your accent still reads as deliberate.

Should I use pure white or off-white for a background?

Off-white, almost always. Pure white is the brightest thing the display can produce, which makes it tiring in dim rooms and prone to flare in bright ones. Moving two to four percent down in lightness is imperceptible as a color change but measurably more comfortable, and it costs you well under half a point of contrast ratio against black text.

How dark should a dark mode background be?

Dark, not black. Around 12–18% perceptual lightness — roughly #1e2128 down to #121418 — gives you room to build elevated surfaces above it while avoiding the halation that pure black produces around light text. Reserve #000000 for OLED power-saving modes where the battery win is the point.

How do I pick text colors for a background?

Solve for contrast rather than guessing at a lightness offset. Fix the hue, then walk lightness until the pair hits your target ratio — 7:1 or better for primary body text, around 4.5:1 for secondary, 3:1 for borders and non-text indicators. That is exactly what the readable text finder and surface system generator do.

Other categories