Neutral color palette

Below are the basic neutrals with hex codes, how to tell warm from cool neutrals, and how to keep a neutral palette from looking flat.

The basic neutrals, with hex codes

These come from the colour names CSS defines. The tool on this page opens with them loaded, so you can click any one for lighter and darker steps.

| Neutral | Hex | Warm or cool | |---|---|---| | White | #ffffff | Neither | | Linen | #faf0e6 | Warm | | Beige | #f5f5dc | Warm (yellowish) | | Tan | #d2b48c | Warm | | Silver | #c0c0c0 | Neither | | Grey | #808080 | Neither | | Slate grey | #708090 | Cool | | Saddle brown | #8b4513 | Warm | | Navy | #000080 | Cool | | Black | #000000 | Neither |

Pure white, black and the plain greys have no hue at all. The rest have a small amount, which is what makes them warm or cool.

Warm vs cool neutrals

Even neutrals lean one way:

• Warm neutrals have a touch of yellow, orange or red: cream, beige, tan, camel, taupe, brown. They feel cosy and suit wood, brass and earthy accents.
• Cool neutrals have a touch of blue or green: blue-grey, slate, charcoal, navy, cool white. They feel crisp and suit chrome, glass and blue or green accents.

Mixing warm and cool neutrals is fine, but give the palette one main temperature and use the other as a contrast.

A useful quirk: a neutral placed next to a strong colour seems to take on the opposite hue. A grey wall beside a bright red sofa can look slightly greenish. If a neutral looks "off" in a room or design, the colours around it are often why.

How to build a neutral palette that works

1. Pick a light base. White, linen or a pale beige for backgrounds, walls or the bulk of a wardrobe.
2. Add one or two mid-tones. Tan, grey or taupe for furniture, cards, trousers or secondary areas.
3. Choose one dark neutral. Charcoal, deep brown, navy or black for text, trim, shoes or outerwear. It gives the palette contrast.
4. Optionally, one accent. A muted colour such as sage, terracotta or dusty blue keeps it from feeling sterile.

In the tool, pick your light base and look at its scale: the 800–950 steps of a warm beige give you matching dark browns, and those of a cool grey give matching charcoals. That keeps every neutral in the same family.

Readability on neutral backgrounds

Neutral palettes often fail on contrast because everything sits in the middle. A few checks:

• Near-black or deep brown text passes WCAG AA easily on white, linen and beige.
• Mid-greys are risky for text. On white, the lightest grey that still passes AA for body text is #767676; plain grey (#808080) is just below.
• Tan and silver are background colours, not text colours.

The contrast labels in the tool show the ratio for every swatch against white and near-black, so you can see which steps are safe for text.

Neutral palettes in clothes

A neutral wardrobe base makes everything else easier to combine. Pick two or three neutrals that suit your colouring: warm skin tones usually look better in cream, camel and brown, cool skin tones in white, grey and navy. Then add colour on top. Our guide to finding your colour palette for clothes explains how to tell which you are.

Neutral palettes for websites and brands

For a site or brand, a neutral palette lets photos and one brand colour do the talking. Use a light neutral for the page, a slightly darker one for cards and sections, a dark neutral for text, and your brand colour only for buttons and links. Copy the result as CSS variables or Tailwind from the tool and you have a full set of named colours.