Color palettes for a business site

Two colors and some neutrals

One main color that carries the identity, one accent reserved for the thing you want people to click, and a range of greys for text, borders and backgrounds. That covers a complete business site.

The accent earns its power from scarcity. If three things on a page are in the accent color, none of them is emphasized, and the page has no visual answer to the question of what to do next.

Most amateur sites fail here rather than on the choice of hue. The palette is not too ugly; it is too large, and everything competes with everything else.

Contrast is not a preference

Text has to meet a measurable contrast ratio against its background. Below it, a meaningful number of people cannot read the page comfortably, including anybody outdoors on a phone.

Light grey text on white is the single commonest version of this failure, and it is usually chosen because it looks refined on a designer's screen in a dark room.

Our page on color contrast covers the actual thresholds and how to check a pair. It is a measurement rather than a judgment, which makes it easy to settle.

Choosing the main color

Start from something the business already owns: a van, a sign, a uniform, an existing logo. Consistency with the physical world is worth more than any theory about what a color communicates.

Avoid the extremes. Pure saturated colors are hard to use, hard to pair with text and tiring on a screen, and they are what make a self-built site look self-built.

Check it works as a background with white text on it. A main color that fails that test will fight you on every button and every banner for the life of the site.

What a complete palette contains

The list below is everything a business site actually needs. Defining these once removes the decision from every future page, which is the real value of having a palette at all.

• One main color, checked against white text
• One accent, used only for the main action
• A near-black for body text, rarely pure black
• Two or three greys for borders and backgrounds
• A white or off-white page background
• A red for errors and a green for success
• A stated pair for every text and background combination

Do not rely on color alone

Anything communicated only by color is invisible to some readers, and to an answer engine reading the page as text. A required field marked red, a status shown as a colored dot, a link distinguished from text only by hue.

Add a second signal: a word, an icon, an underline. That single habit covers most of what colorblind visitors need and it costs almost nothing to build in from the start.

Our page on error messages covers the sharpest case, where a red border with no text leaves somebody unable to work out what is wrong.

Consistency across the site

Define the palette once and use the same values everywhere rather than picking a similar shade on each page. Near-misses are more noticeable than differences, because the eye reads them as a mistake.

Keep the definitions somewhere a future person can find. A palette that exists only inside one designer's file is a palette the next person will approximate.

Our page on modern design covers the wider point. Consistency is what most of the difference between amateur and professional actually consists of.

Dark backgrounds and dark mode

A dark site is a design choice with a readability cost: light text on dark is harder for many readers at length, and it needs different contrast handling rather than the same palette inverted.

Our page on dark mode covers offering both, which is a different question from designing dark by default.

If you do go dark, avoid pure black with pure white text. Softening both ends reduces the harshness and makes long passages considerably easier to read.