What Colors Go with Muted Blue? How to Create a Soft Color Scheme
Muted blue is a general term for a calmer blue with reduced saturation or a grayish cast, rather than a single Web-standard color with one fixed HEX value. In this article, muted blue #7189A6 is used as a concrete example. It is paired with soft ivory, dusty peach, and pale sage to create a gentle palette while keeping the blue clearly present.
Pair muted blue with light, low-saturation surfaces
In CSS HSL (Hue, Saturation, and Lightness), saturation describes color intensity and lightness describes how light or dark a color is. A restrained blue such as muted blue #7189A6 is easier to organize when larger surrounding surfaces are light and quiet rather than highly saturated.
HueRoll’s guide to complementary and analogous colors also notes that hue distance alone does not complete a palette; saturation, lightness, area, and text contrast matter as well. With muted blue, you do not need to stay only within cool colors. Dusty peach adds a soft warm contrast, while pale sage introduces another low-saturation hue without making the palette feel busy.
Three pairings that keep muted blue soft and balanced
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Soft ivory | #F7F4EF | Page background | Keeps the largest surface light so muted blue can appear in headings and decorative areas. |
| Dusty peach | #E8D9D1 | Cards and supporting surfaces | Adds a low-saturation warm hue so the interface does not depend only on cool colors. |
| Pale sage | #DCE3D8 | Small supporting surface | Introduces a pale green while preserving the restrained, muted character of the palette. |
For body text, dark charcoal #293039 has a contrast ratio of about 12.14:1 on soft ivory #F7F4EF, about 9.69:1 on dusty peach #E8D9D1, and about 10.17:1 on pale sage #DCE3D8. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Muted blue #7189A6 should not automatically be used as normal-size text on soft ivory #F7F4EF, because the contrast ratio is only about 3.28:1. White text #FFFFFF on muted blue #7189A6 is also only about 3.60:1. It is better to keep muted blue on decorative or filled areas and use a deeper color for text and primary controls.
For primary links or a CTA (call-to-action button), deep slate blue #40566F is a more reliable choice. Its contrast ratio is about 6.89:1 against soft ivory #F7F4EF, about 5.50:1 against dusty peach #E8D9D1, and about 5.77:1 against pale sage #DCE3D8. White text #FFFFFF on deep slate blue #40566F has a contrast ratio of about 7.56:1.
Main color:#7189A6 / Background:#F7F4EF / Supporting surface:#E8D9D1 / Action color:#40566F
Create softness through area and role rather than by adding more pale colors
On an introduction or reservation page, soft ivory can cover the main background, dusty peach can support cards, pale sage can be used for small supporting areas, muted blue can appear in headings and decorative details, and deep slate blue can be reserved for the primary button. This creates softness without making every surface equally pale.
The 60–30–10 approach can be used as a loose hierarchy rather than an exact pixel formula: let the background occupy the largest area, supporting colors a medium area, and the main or action color a smaller focal role. Do not communicate selection or importance through color alone; add text labels, icons, underlines, borders, or other visible cues.
HueRoll lets you review tints, shades, complementary and analogous colors, other harmony suggestions, and 60–30–10 candidates from a selected color. After choosing muted blue, use tints for background candidates, shades for action colors, and analogous or complementary suggestions for supporting colors. HueRoll’s contrast section compares the selected color only with white and black, so the arbitrary two-color contrast ratios shown in this article were calculated separately.