What Colors Go with Cobalt Blue? Color Pairings That Highlight Strong Blue
Cobalt blue is useful when you want a strong blue to act as the visual focal point. In this article, cobalt blue #0047AB is used as a concrete example and paired with porcelain white, mist blue-gray, and warm sand. Rather than making the blue itself paler, the surrounding lightness, saturation, and area are adjusted so the cobalt blue can stand out cleanly.
Give strong cobalt blue plenty of light surrounding space
In CSS HSL (Hue, Saturation, and Lightness), saturation describes color intensity and lightness describes how light or dark a color is. The cobalt blue #0047AB used here is about 215 degrees in hue, 100% saturation, and 34% lightness. Because it is both vivid and relatively deep, using equally strong colors across backgrounds and supporting surfaces can make the whole interface feel rigid. Keeping large surfaces light and supporting colors lower in saturation makes the roles easier to distinguish without weakening the blue itself.
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 cobalt blue, a warm complementary-side color does not need to stay vivid. A restrained color such as warm sand can be used in a smaller area to support the blue without competing with it.
Three pairings that highlight strong cobalt blue
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Porcelain white | #F8F7F3 | Page background | Keeps the largest surface nearly white so cobalt blue can lead in headings and buttons. |
| Mist blue-gray | #E4EAF0 | Cards and supporting surfaces | Keeps a subtle blue connection while separating one layer from the main background. |
| Warm sand | #E8D7B5 | Small accent | Adds a restrained warm contrast in badges or small information areas. |
For body text, dark charcoal #252B33 has a contrast ratio of about 13.31:1 on porcelain white #F8F7F3, about 11.77:1 on mist blue-gray #E4EAF0, and about 10.07:1 on warm sand #E8D7B5. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
When cobalt blue #0047AB is used for links or a CTA (call-to-action button), its contrast ratio is about 7.87:1 against porcelain white #F8F7F3, about 6.96:1 against mist blue-gray #E4EAF0, and about 5.95:1 against warm sand #E8D7B5. White text #FFFFFF on cobalt blue #0047AB has a contrast ratio of about 8.44:1.
Main and action color:#0047AB / Background:#F8F7F3 / Supporting surface:#E4EAF0 / Accent:#E8D7B5
Highlight the blue by limiting its area rather than adding more colors
On a service or product page, porcelain white can cover the main background, mist blue-gray can support cards, warm sand can appear in small information areas, and cobalt blue can be reserved for the primary button and selected heading details. This keeps the blue strong without letting it dominate every surface.
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 a strong color such as cobalt blue 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 cobalt blue, use tints for background candidates, analogous colors for supporting surfaces, and complementary-side candidates only in smaller accent roles. 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.