What Colors Go with Greige? Color Pairings That Make the Most of Muted Colors

Greige is a name used for colors that sit visually between gray and beige rather than one fixed, standardized shade. This article uses ■#B8ADA3 as one practical reference. Here, “muted colors” means colors with restrained saturation—the intensity or vividness of a color. The goal is to keep the calm character of greige while giving backgrounds, text, headings, and buttons clear roles in a Web design.

Pair greige with light neutrals and low-saturation accents

With a greige such as ■#B8ADA3, using several vivid colors around it can quickly overpower its muted character. A more controlled approach is to keep the surrounding colors low in saturation while creating clearer differences in lightness. Use off-white ■#F7F4F0 for the page background and charcoal ■#33302E for body text. This makes it easier to use greige across larger surfaces without losing the distinction between content and background.

For an accent, dusty blue ■#5A6F7D or muted rose ■#7B6166 are useful options. Both introduce a different hue from greige, while their restrained saturation helps the overall palette remain quiet rather than becoming visually competitive.

Three combinations that make the most of muted colors

1. Create lightness contrast with off-white and charcoal

Use off-white ■#F7F4F0 for the page background, greige ■#B8ADA3 for cards or heading bands, and charcoal ■#33302E for body text. The contrast ratio, which describes the relative brightness difference between foreground and background colors, is about 11.95:1 for charcoal on off-white and about 5.95:1 for charcoal on greige. Placing greige between a light background and dark text helps prevent a muted palette from looking visually washed out.

2. Use dusty blue for buttons and links

For a primary button, use dusty blue ■#5A6F7D with white ■#FFFFFF text. Their contrast ratio is about 5.24:1. Dusty blue used as link text on off-white ■#F7F4F0 has a ratio of about 4.78:1. This is a useful direction when you want to add a slightly cool note without giving up the softness of the greige base.

3. Add a warm accent with muted rose

Use muted rose ■#7B6166 only in limited areas such as a campaign label or short piece of emphasis. This adds warmth while preserving the subdued character of greige. Rose text on off-white ■#F7F4F0 has a contrast ratio of about 5.12:1, while white ■#FFFFFF on a muted-rose background is about 5.61:1. Rather than using both dusty blue and rose as strong accents at the same time, choose one to keep the number of competing colors low.

Do not place muted colors with similar lightness directly on each other

Greige ■#B8ADA3 and dusty blue ■#5A6F7D have a contrast ratio of about 2.38:1. Greige and muted rose ■#7B6166 are about 2.55:1. Although the hues look different, the lightness difference is not sufficient for normal-size text placed directly on those backgrounds. Switch the text to charcoal ■#33302E or white ■#FFFFFF as appropriate, and limit the accent colors to clear roles such as buttons, links, or short labels.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. In HueRoll, you can enter greige ■#B8ADA3 as a six-digit HEX code, a hexadecimal format used to represent Web colors, and review tints, shades, complementary colors, analogous colors, other palette suggestions, and contrast against white or black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG AA or AAA conformance, so the pairwise contrast ratios in this article were calculated separately.