What Colors Go with Old Rose? Muted Pink Color Scheme Examples

Warm ivory, muted sage green, and deep plum are all useful colors to pair with old rose. Because old rose is a subdued pink with a slightly grayish undertone, the mood changes depending on whether you surround it with pale colors or introduce a dark contrast. The following examples show how to assign background, heading, and button colors on a flower-ordering page and a reading-event banner.

Give ivory, sage green, and deep plum different roles

Old rose describes a muted, somewhat dusty pink rather than a universally fixed numerical color. For these examples, the selected old-rose swatch is ■#B77B86. Pair it with warm ivory ■#FFF8EF for large backgrounds, pale sage green ■#DCE7DD for supporting surfaces, and deep plum ■#57394B for prominent headings or buttons. These are proposed website colors; their names do not have only one correct HEX value.

HEX is a hexadecimal web color code written with a hash sign and six letters or digits. A contrast ratio measures the difference in relative brightness between two colors. The ratio for old rose ■#B77B86 against ivory ■#FFF8EF is about 3.22:1, while sage green ■#DCE7DD against ivory ■#FFF8EF is only about 1.21:1. These pale surfaces can sit comfortably in one palette, but spacing or outlines may be needed wherever their boundary matters.

Try the colors on a flower-ordering page and a reading-event banner

Example A: a website for ordering bouquets.Use ivory ■#FFF8EF as the page background. Give the introductory heading an old-rose ■#B77B86 band and dark charcoal ■#211C24 lettering. Set delivery dates and bouquet-size details on a sage-green ■#DCE7DD panel with the same charcoal ■#211C24 text. Make the “Order a Bouquet” button deep plum ■#57394B on an ivory background, with ivory ■#FFF8EF button text. The contrast ratios are approximately 4.93:1 for the heading, 13.15:1 for the details, and 9.52:1 for the button text. Leave light space around the product photographs and reserve plum for the primary action.

Example B: a banner for an evening reading event.Use deep plum ■#57394B across the main background, with the event name and date in ivory ■#FFF8EF. Add old rose ■#B77B86 as a narrow decorative strip. Place longer details, such as how to attend, in a separate ivory ■#FFF8EF area with dark charcoal ■#211C24 lettering. If a “View Event Details” button sits on the plum background, use an ivory ■#FFF8EF fill with plum ■#57394B text. Plum against ivory provides about 9.52:1 text contrast. Keep the old-rose strip decorative, and spell out important information such as registration status rather than communicating it through color alone.

Check boundaries between pale colors and text on old rose

Normal-sized white ■#FFFFFF text on old rose ■#B77B86 has a contrast ratio of about 3.39:1. This falls below the 4.5:1 minimum for normal-sized text at WCAG (Web Content Accessibility Guidelines) 2.2 Level AA. Dark charcoal ■#211C24 on the same background reaches about 4.93:1. The numerical minimum for large text is 3:1, but the actual font size and weight must also be checked.

The boundary between sage green ■#DCE7DD and ivory ■#FFF8EF has only about 1.21:1 contrast. Where a boundary is necessary to identify an input or another control, a deep-plum ■#57394B outline is one option. It contrasts with sage green by approximately 7.90:1 and with ivory by about 9.52:1. Visual information required to identify an interactive control generally needs at least 3:1 contrast against adjacent colors. Purely decorative panels do not all need strong outlines.

HueRoll allows you to adjust colors using HEX input and check the selected color’s contrast against white or black. It cannot compare arbitrary custom color pairs or automatically determine WCAG pass or fail. The specific text, button, and background combinations in this article were calculated separately.