Neutral Colors: Undertones, Palettes and How to Use Them

Neutral colors are the whites, blacks, grays, beiges and browns that make up most of almost every design. They hold text, fill backgrounds, cover walls and frame the brighter colors that get the attention. Because they're everywhere, small differences between them matter a lot: a slightly yellow white and a slightly blue white can make the same room or website feel warm or cold.

Our guide to color psychology touches on what white, black, gray and beige can suggest. This guide goes deeper: what each neutral is, how undertones work, how to tint neutrals with a brand color, and how to choose neutrals for an interface or a room, with example palettes and the contrast of text on each.

What makes a color neutral

A true neutral has no hue at all: pure white, pure black and the grays between them. In practice, most neutrals people use carry a small amount of hue, so little that they read as neutral rather than as a color. That hint of hue is the undertone, and it decides whether a neutral feels warm, cool or balanced.

• Warm undertones lean toward yellow, orange or red. They feel cozy, soft and inviting.
• Cool undertones lean toward blue, green or violet. They feel crisp, clean and modern.
• Balanced neutrals sit close to pure gray, which makes them easy to combine with almost anything.

The neutrals, one by one

White and off-white

Pure white #FFFFFF feels bright, clean and modern, but in large areas it can feel stark or clinical, and on screens it's the brightest thing in view. Off-whites soften it. A soft white such as #FAFAF9 is barely different, while warmer whites with a touch of yellow feel gentler and more relaxed.

Cream and ivory

Cream is a white with a clear warm, yellowish undertone, such as #F5F0E1. It feels traditional, comfortable and a little nostalgic, and it suits paper-like backgrounds, interiors and food and lifestyle brands. Dark text reads very well on it: #1C1917 on that cream is 15.35:1.

Beige

Beige is a pale, light brown, such as #E8DCC8. It feels calm, natural and understated, and it's a classic base for rooms and clothing. Too much beige can feel bland, so it works best with texture, wood, or a darker accent.

Greige

Greige is a mix of gray and beige, such as #C8C0B4. It's warmer than gray and cooler than beige, which makes it one of the easiest neutrals to live with. It works with both warm woods and cool metals, which is why it's so popular for walls and furniture.

Taupe

Taupe is a darker gray-brown, such as #8B7D70. It feels grounded, sophisticated and earthy. It's a mid-tone, so neither black nor white text is a strong choice on it: white text is 3.98:1 and near-black #1C1917 only 4.38:1. Use it for surfaces, furniture and accents rather than as a background for text.

Gray

Gray changes character with its undertone. A cool gray such as #6B7280 leans slightly blue and feels technical and modern. A warm gray such as #78716C leans slightly brown and feels softer. Both pass as text on white, at 4.83:1 and 4.79:1, so mid grays like these work for secondary text but are the lightest you should go.

Charcoal and black

Pure black #000000 is the strongest neutral and can feel dramatic, formal or heavy. Charcoal and off-blacks soften it: charcoal #2B2B2B is a neutral dark gray, and #1C1917 is a near-black with a faint warm undertone. White text is still easy to read on both, at 14.15:1 and 17.48:1, without the hardness of pure black.

Neutral text on neutral backgrounds

Neutral palettes are where low-contrast text sneaks in, because soft, tonal combinations look elegant. Check the pairs you actually use:

• Taupe #8B7D70 text on cream #F5F0E1: 3.50:1. It looks refined but fails for normal text.
• Warm gray #78716C on the same cream: 4.21:1. Still short of 4.5:1.
• Warm stone #57534E on cream: 6.69:1, and 5.63:1 on beige #E8DCC8. A safe secondary text color for a warm palette.
• Near-black #1C1917 on greige #C8C0B4: 9.70:1.

The pattern is simple: on light neutrals, text needs to come from the darker third of the scale. Mid-tone neutrals such as taupe and greige are for surfaces and accents, not for text.

Tinted neutrals

A tinted neutral is a gray or off-white with a small amount of your brand hue mixed in. It still reads as neutral, but it makes the whole design feel related to the brand color instead of sitting next to it. Many polished interfaces use tinted neutrals rather than pure grays for exactly this reason.

To make one, keep the hue of your brand color and drop its saturation very low, then build a scale from light to dark. Here are two scales built that way, one from an indigo hue and one from a warm orange hue.

• Keep saturation low, roughly 10 to 30 percent for light steps and less for the mid steps, or the neutral starts to look like a pale color.
• Use the tint consistently across backgrounds, borders and text, so nothing looks out of place.
• Warm brands suit warm-tinted neutrals and cool brands suit cool ones, but a cool neutral can also calm down a very warm brand color.

Choosing neutrals for interfaces

1. Pick a temperature that fits the brand: cool and crisp, warm and soft, or tinted with the brand hue.
2. Build a full scale, from a background near white to a text color near black, with a few steps between for surfaces, borders and secondary text.
3. Avoid pure black text on pure white for long reading. A near-black on a white or off-white is softer and still has plenty of contrast.
4. Use slightly different neutrals to separate layers, such as a page background and a card, instead of relying only on borders and shadows.
5. Check every text pair, especially secondary text and placeholders, which are usually the first to fail.
6. Plan the dark theme with its own neutrals: very dark grays or navies for surfaces, and off-whites for text.

Choosing neutrals for rooms

In a room, light changes neutrals more than any other color, because their undertones are so subtle. The same greige can look warm and sandy in evening lamplight and cold and gray in cool daylight.

• Look at the light. Rooms that get cool, indirect daylight often suit warmer neutrals, which keep them from feeling chilly. Rooms with warm, direct sun can take cooler neutrals.
• Match undertones to fixed things you can't change, such as floors, stone, tiles and large furniture. A pink-beige wall next to a yellow-beige floor can look slightly off.
• Test large samples on more than one wall and look at them at different times of day before deciding.
• Layer neutrals of different lightness and add texture, such as wood, linen, wool and stone, so a neutral room feels rich instead of flat.
• Use a darker neutral, such as charcoal, taupe or a deep brown, for contrast on a feature wall, cabinets or a sofa.

Common mistakes with neutrals

• Mixing warm and cool neutrals by accident, so some surfaces look dirty or mismatched.
• Using only mid-tones, which makes a design or room feel flat and murky. Every neutral palette needs a clear light and a clear dark.
• Light gray or taupe text on cream or beige, which looks soft and fails contrast.
• Choosing paint from a tiny swatch under store lighting.
• Treating neutrals as an afterthought. They usually cover most of the space, so they set the mood more than the accent colors do.

Good neutrals are rarely noticed, and that's the point. Choose their undertone on purpose, give them a full range from light to dark, and the brighter colors you add will look better for it.