Do Smoky Blue and Mauve Go Together? How to Combine Two Muted Colors

Smoky blue and mauve can work well together. Smoky blue is a grayish blue, while mauve is a muted reddish-purple; both can produce a subdued color scheme when their intensity is reduced. But placing equally large blocks of these colors next to each other may make their boundary unclear or text harder to read. This article compares a portfolio project card and a workshop announcement banner to show how to assign the colors different roles.

Match the muted tones, then vary brightness and area

Saturation describes how vivid or subdued a color appears. When smoky blue and mauve have relatively low saturation, neither has to compete strongly for attention, and their blue and reddish-purple hues can create a gentle difference. If their brightness is also very similar, however, the boundary between adjacent blocks may become difficult to distinguish.

For these examples, use smoky blue ■#8198A6 and mauve ■#B29AAA. These are proposed HEX values (hexadecimal codes used to specify colors on the web), not universally fixed definitions of either color name. Their contrast ratio is approximately 1.16:1, so they differ only slightly in relative brightness. A contrast ratio measures the difference in relative luminance between neighboring colors.

Rather than giving both colors equal areas of the background, use one over a larger area and reserve the other for a small label or decorative detail. This can help establish a clearer order for the information.

Compare a portfolio project card and an announcement banner

Example A: a quiet portfolio project card.Use a slightly cool off-white ■#F7F4F1 across the page, with smoky blue ■#8198A6 behind the card heading. Keep the heading and body text in dark charcoal ■#212832. Apply mauve ■#B29AAA to the background of a small category label such as “Illustration,” with the same charcoal ■#212832 for its lettering. Leave an off-white gap between the blue heading panel and the mauve label, so the two muted areas do not touch and blur into one another.

In this palette, dark charcoal ■#212832 on smoky blue ■#8198A6 has a text contrast ratio of about 4.93:1; charcoal ■#212832 on mauve ■#B29AAA measures about 5.72:1; and charcoal ■#212832 on off-white ■#F7F4F1 measures about 13.55:1.

Example B: a workshop announcement banner.Cover the main background with pale mauve ■#E9DFE6 and set the event name and date in dark charcoal ■#212832. Use smoky blue ■#8198A6 only for a short decorative line. Give the “Register” button a deeper blue-gray ■#496579 fill and white ■#FFFFFF lettering. This creates a stronger light-dark difference at the main action while preserving the subdued palette. Pale mauve ■#E9DFE6 against charcoal ■#212832 has a contrast ratio of approximately 11.43:1, and white ■#FFFFFF on the deep blue-gray ■#496579 button reaches about 6.14:1.

Check the edges between muted colors and small text

Normal-sized white ■#FFFFFF lettering placed on the original smoky blue ■#8198A6 would have a contrast ratio of only about 3.01:1. Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-sized text generally needs at least 4.5:1 contrast, while large text needs at least 3:1. Do not use small white lettering on that blue; choose dark text as in Example A instead.

When the boundary between two background colors is necessary to identify a control or understand information, do not rely on spacing alone. Add a suitably contrasting outline or another shape cue. Also inspect the design at smartphone width: make sure small labels remain legible and the main button does not disappear into the surrounding colors.

HueRoll lets you enter HEX values to adjust colors and check the selected color’s contrast with white or black. It cannot compare arbitrary custom color pairs or automatically declare a WCAG pass or fail. The contrast ratios between the colors and between text and backgrounds in this article were calculated separately.