What Colors Go with Blue-Gray? A Calm, Sophisticated Color Scheme
Blue-gray is useful when you want the clarity of blue with a more restrained, gray-influenced character. In this article, blue-gray #6B7C8D is used as a concrete example. It is paired with porcelain white, cool mist, and light greige to keep the cool, quiet character while preventing the page from feeling overly cold.
Pair blue-gray with light neutrals and deeper text colors
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 blue-gray #6B7C8D is easier to organize when large surrounding surfaces use light grays and greige rather than equally strong cool colors.
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 blue-gray, you do not need to stay only within analogous cool colors. Light neutrals and a slightly warmer greige can keep the palette calm while preventing it from becoming flat.
Three calm, sophisticated colors to pair with blue-gray
| Color | HEX | Role | How to use it |
|---|---|---|---|
| Porcelain white | #F7F7F5 | Page background | Keeps the largest surface nearly white so blue-gray can appear in headings and decorative areas. |
| Cool mist | #E3E8EB | Cards and supporting surfaces | Keeps a small amount of cool blue while separating one layer from the page background. |
| Light greige | #E7DED5 | Small supporting surface | Adds a slightly warmer neutral so the palette does not rely entirely on cool colors. |
For body text, dark charcoal #252B31 has a contrast ratio of about 13.33:1 on porcelain white #F7F7F5, about 11.58:1 on cool mist #E3E8EB, and about 10.76:1 on light greige #E7DED5. All three exceed the WCAG 2.2 (Web Content Accessibility Guidelines) minimum of 4.5:1 for normal-size text.
Blue-gray #6B7C8D should not automatically be used as normal-size text on porcelain white #F7F7F5, because the contrast ratio is about 4.00:1. White text #FFFFFF on blue-gray #6B7C8D is also only about 4.29:1, below the 4.5:1 minimum for normal-size text. It is safer to keep blue-gray on heading backgrounds or decorative surfaces and use a deeper color for body text and primary controls.
For primary links or a CTA (call-to-action button), deep blue-gray #3A4E60 is a more reliable choice. Its contrast ratio is about 8.03:1 against porcelain white #F7F7F5, about 6.97:1 against cool mist #E3E8EB, and about 6.48:1 against light greige #E7DED5. White text #FFFFFF on deep blue-gray #3A4E60 has a contrast ratio of about 8.61:1.
Main color:#6B7C8D / Background:#F7F7F5 / Supporting surface:#E3E8EB / Action color:#3A4E60
Create sophistication through lightness and role rather than more colors
On a company profile or service page, porcelain white can cover the main background, cool mist can support cards, light greige can be used for smaller secondary areas, blue-gray can appear in headings and decorative elements, and deep blue-gray can be reserved for primary buttons. This creates a quiet hierarchy without adding many colors.
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 blue-gray, 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.