What Colors Go with Muted Dark Blue? Color Combinations to Elegantly Highlight a Weighty Blue [#1C284A]

Muted Dark Blue (■#1C284A) is a deep blue with a slight violet cast and restrained brightness. It can give headings and navigation visual weight, but using only blue shades may make a page feel cold and flat. Here, frost gray, slate blue, and muted teal keep the palette composed.

Use frost gray for space and teal for quiet variation

Pair ■#1C284A with ■#EEF2F6 for the background, ■#526277 for secondary text, and ■#789E9B as an accent. The light gray opens up reading areas, slate blue creates hierarchy, and muted teal shifts slightly toward blue-green without becoming as forceful as vivid cyan.

Keep reading surfaces light and concentrate dark blue in key areas

Use ■#EEF2F6 for body and card backgrounds, ■#1C284A for headings and primary text, and ■#526277 for supporting information. On the dark blue surface, a ■#789E9B button with ■#1C284A text creates a restrained change.

Contrast ratios are about 12.86:1 for ■#1C284A with ■#EEF2F6, 5.54:1 for ■#526277 with the same light background, and 4.93:1 for ■#1C284A with ■#789E9B. These text pairs exceed the WCAG 2.2 minimum of 4.5:1 for normal text; the last pair also exceeds the 3:1 requirement for visual information needed to identify meaningful UI (user interface) components.

Keep teal on the dark surface

■#789E9B against ■#EEF2F6 is about 2.61:1. Do not use teal for normal text on that light background or as the only boundary cue for a meaningful UI component. WCAG 2.2 requires 3:1 contrast against adjacent colors for relevant interface visuals. Reserve teal for buttons, selected labels, or small accents inside the darker ■#1C284A area.