Your background is the most important color on the page

Open any color tool and it will hand you a palette: five swatches in a row, evenly spaced, beautifully balanced, and completely detached from where they are going to be used. You are left to work out which one is the background, which one is the text, and why the combination you liked in the swatch row is illegible the moment you put it on a page.

The order is backwards. On a website, one color covers more surface area than everything else combined. It is behind your text, behind your cards, behind your images, visible in the gaps between every component. It is the only color a user sees continuously from the moment the page paints. And it constrains every other choice you have not made yet.

What the background decides for you#

Pick a background and you have already answered these questions, whether you meant to or not:

How dark your text has to be. Not a preference — a number. On #ffffff you need roughly #767676 or darker to clear 4.5:1. On #f4f1ea the threshold shifts. On a saturated mid-blue there may be no text color that clears 7:1 at all, in either direction.
How saturated your accent can be. An accent needs to separate from the background. On a near-black background a mid-chroma blue reads as an accent; on a mid-blue background the same color disappears.
Whether shadows do anything. Shadow is the absence of light on a surface. On a dark background there is very little light to remove, so elevation has to come from lighter surfaces instead — a completely different set of tokens.
How your images will sit. A photograph on a near-white page reads as a window. The same photograph on a near-black page reads as a light source. Same file, different object.
What your borders can be. A border needs to separate two surfaces without becoming a line the eye tracks. That is roughly a 1.2–1.6:1 relationship with the background, and it is a different hex on every background you try.

None of that is stylistic. It is all arithmetic that follows from a single value.

The two-question test#

When someone shows me a palette, I ask two questions:

Which of these is the background?
What is the body text?

If the answer to the first is "we hadn't decided" and the answer to the second is "black, probably", the palette is not a palette. It is a mood board. Mood boards are useful. They are not systems.

A system answers both questions and then derives everything else. Here is a background and the surfaces it implies:

Every one of those is computed from the first. The surfaces step up in lightness; the border sits far enough from the background to be visible and close enough not to be loud; the text is pushed until it clears 7:1 and stops there. Change the first swatch and all five move together. That is what makes it a system rather than six colors that happen to look nice.

Light or dark is not the question#

The useful question is not "light mode or dark mode". It is how far from the middle.

Backgrounds near the extremes — below about 20% lightness or above about 90% — have plenty of contrast headroom in one direction. You can build a full hierarchy of text tiers, borders and surfaces without running out of room.

Backgrounds in the middle are where interfaces go to die. A mid-gray background at 50% lightness gives you a maximum contrast of about 5.3:1 with black and 3.9:1 with white. That is not enough for a text hierarchy. You get one usable text color, no muted tier, and no room for a disabled state.

So pick it first#

Not because the background is the most interesting color — it usually is not — but because it is the one that constrains all the others. Choose it, then derive. The background picker on this site does exactly that, and it themes this entire page while you do it: change the background and the navigation, the cards, the borders and this paragraph all recompute from it.

If a background produces an unreadable interface here, it will produce an unreadable interface in your product. That is the whole point of making the tool and the demo the same thing.