What Colors Go with Muted Dark Azure? Color Pairing Examples to Give Dark Sky Blue a Cool, Cohesive Look [#1C394A]

Muted Dark Azure (■#1C394A) is a subdued dark sky-blue with a slight cyan cast. In web design, it can add cool visual weight to side navigation, headings, and card title bands, but a palette made only from nearby blues can make the page feel cold and flat. Here, we pair it with cool mist, blue-gray, and dusty lavender to keep the dark sky-blue crisp while separating information roles clearly.

Build on a light mist surface and use lavender to avoid an all-blue palette

■#1C394A can be paired with a cool mist background, ■#EEF4F5, a blue-gray for secondary text, ■#4B6570, and a dusty lavender accent, ■#AB9AC0.

■#EEF4F5 has a slight blue-green cast, so it brightens body and card surfaces while keeping the palette cool. ■#4B6570 is a low-saturation blue-gray that can handle metadata and supporting copy without adding another hue family. ■#AB9AC0 shifts from azure toward violet, adding variation that feels different from simply adding more cyan or blue steps.

Concentrate the dark azure in navigation and headings, and keep reading surfaces light

For a practical layout, use ■#EEF4F5 for body and information-card backgrounds, ■#1C394A for headings and primary text, and ■#4B6570 for secondary information. For a UI (user interface) accent, place a ■#AB9AC0 button or selected label on the dark ■#1C394A surface and use ■#1C394A for the button text.

A contrast ratio measures the relative luminance difference between text or interface elements and their background. The ratio between ■#1C394A and ■#EEF4F5 is about 10.90:1, between ■#4B6570 and ■#EEF4F5 is about 5.57:1, and between ■#1C394A and ■#AB9AC0 is about 4.68:1. WCAG 2.2 requires at least 4.5:1 contrast for normal-size text, so the text combinations shown here meet that threshold. When a ■#AB9AC0 button sits on the dark ■#1C394A surface, the button-to-surrounding contrast is also about 4.68:1, exceeding the 3:1 threshold used for visual information needed to identify meaningful UI components.

For a cool, cohesive look, do not use lavender as text or a boundary on the light surface

■#AB9AC0 stays on the cool side of the palette while shifting toward violet. Rather than spreading it across a large background, reserve it for a primary button, selected tab, or small label inside a dark ■#1C394A area. This keeps the azure calm while still giving the eye a distinct point of emphasis.

By contrast, ■#AB9AC0 against ■#EEF4F5 has a contrast ratio of about 2.33:1. It should not be used for normal text on that light background, and the boundary of a meaningful UI component should not rely on this pair alone. WCAG 2.2 uses a 3:1 contrast requirement against adjacent colors for visual information needed to identify user interface components and meaningful graphics. On light surfaces, use a sufficiently darker background or border such as ■#1C394A for interactive elements.