What Accent Colors Go with Old Rose and Greige? Adding Variety to a Muted Color Scheme

Deep teal or dark olive can work as an accent color alongside old rose and greige. The combination of a subdued, reddish pink and a grayish beige feels restrained, but buttons and headings may not stand out if everything is kept equally soft. To add variation without introducing too many colors, first decide where an accent is needed and how much space it should occupy. Here are two practical website examples.

Try either deep teal or dark olive in a small accent area

For these examples, we start with old rose ■#B6818B and greige ■#E7DFD6. They are proposed design swatches, not universally fixed numerical definitions of the color names. HEX is a web color notation made from a hash sign followed by six hexadecimal digits.

These two colors have a contrast ratio of approximately 2.45:1. A contrast ratio describes the difference in relative brightness between neighboring colors. Since their brightness is fairly close, using similarly toned buttons can weaken the visual hierarchy. Choose either deep teal ■#22575B or dark olive ■#4E5940 as a single accent color, and reserve it for a button or a short announcement rather than using both everywhere.

Use the accent differently on product cards and event banners

Example A: a handmade jewelry product page.Use greige ■#E7DFD6 as the page background, with a small old-rose ■#B6818B heading band beneath each product photo. Set product names, prices, and descriptions in dark charcoal ■#241F25. Put a deep-teal ■#22575B “View Product” button on the greige surface and use white ■#FFFFFF text on the button. Teal differs in hue from the reddish pink, creating a clearer place for the action within the subdued palette. The text contrast ratios are approximately 12.27:1 for charcoal ■#241F25 on greige ■#E7DFD6, 5.01:1 for charcoal ■#241F25 on old rose ■#B6818B, and 8.13:1 for white ■#FFFFFF on deep teal ■#22575B.

Example B: a craft workshop announcement banner.Place the short “Autumn Craft Workshop” heading in charcoal ■#241F25 on an old-rose ■#B6818B section, while the date and participation details appear in charcoal ■#241F25 on a greige ■#E7DFD6 section. Make the “Sign Up” button dark olive ■#4E5940 on the greige background, with white ■#FFFFFF lettering. Olive contrasts with greige by approximately 5.63:1, and white text on the olive button has about 7.43:1 contrast. Replacing the cooler teal with a nature-inspired olive gives the same base colors a different, still restrained feeling.

In both layouts, the accent is limited to relatively small areas such as a button. Starting with roughly 5–10% of the colored area is one possible design experiment, not a fixed rule. Adjust the balance according to the photographs, spacing, and amount of text.

Check the boundaries between pale colors and the contrast of white text

Normal-sized white ■#FFFFFF text on old rose ■#B6818B reaches only about 3.23:1 contrast. That falls below the 4.5:1 minimum for normal-sized text at Level AA of WCAG (Web Content Accessibility Guidelines) 2.2. Dark charcoal ■#241F25 on the same old-rose background reaches approximately 5.01:1, so we use dark lettering in the example heading bands. The numerical minimum for large text is 3:1, but the actual font size and weight still matter.

The boundary between old rose ■#B6818B and greige ■#E7DFD6 is approximately 2.45:1. Spacing can be enough when the boundary is only decorative, but if recognizing a control or its state depends on the boundary, add a suitably contrasting dark outline or another visual cue. Important visual information needed to identify a user interface component generally requires at least 3:1 contrast with adjacent colors. At smartphone width, also check that buttons and dates remain close enough to be understood together.

HueRoll lets you adjust a color by entering a HEX code and inspect the selected color’s contrast against white or black. It cannot compare any two arbitrary colors or automatically judge WCAG conformance. The contrast ratios for the specific combinations in this article were calculated separately.