Blue-Gray and White Web Color Schemes: How to Add Variation to Backgrounds and Cards

Blue-gray and white are useful when you want a website to feel calm without relying on many colors. Yet white cards on a white page can lose their boundaries, while large uninterrupted areas of dark blue-gray may make the layout feel heavy. By alternating the colors of the surrounding sections and the cards, you can give information a clearer structure without changing the entire palette.

Layer white cards over pale blue-gray backgrounds

Blue-gray is a general term for gray with a blue cast, not a color with a single fixed code. In this example, we use pale blue-gray ■#E7EEF2 and deep blue-gray ■#435E70 for different purposes. HEX is a web color notation consisting of a hash sign and six hexadecimal digits.

If the whole page is white ■#FFFFFF and its cards are a light blue-gray ■#DCE5EC, the contrast ratio between the two surfaces is only about 1.28:1. Reverse the arrangement—pale blue-gray ■#E7EEF2 for the section and white ■#FFFFFF for the cards—and the ratio is about 1.17:1. A contrast ratio measures the difference in relative brightness between colors. Since these two variations are subtle, spacing or outlines may still be needed to identify each card.

You can also reserve the deeper blue-gray ■#435E70 for one prominent section. White ■#FFFFFF text on it has a contrast ratio of about 6.83:1. This gives a short announcement area a different role from the lighter parts of the page where visitors compare cards.

A blue-gray and white palette for a coworking-space website

Imagine a website introducing desks, meeting rooms, and lockers in three separate cards, followed by an invitation to book a tour. The colors can be organized as follows.

• Introduction and general information: Use white ■#FFFFFF for the page background, deep blue-gray ■#435E70 for headings, and charcoal ■#283844 for body text. Against white, their respective contrast ratios are about 6.83:1 for headings and 12.07:1 for paragraphs.
• Amenities list: Use pale blue-gray ■#E7EEF2 behind three white ■#FFFFFF amenity cards. Where visible card edges matter, add a blue-gray border ■#60768B. This border contrasts at about 4.71:1 with the white cards and 4.01:1 with the surrounding pale background. Keep card titles in deep blue-gray ■#435E70 and descriptions in charcoal ■#283844.
• Terms and conditions card: On a white ■#FFFFFF information section, introduce one softly tinted card ■#DCE5EC for practical notes. This card differs from white by only about 1.28:1. If it needs a clear outline, reuse the border ■#60768B, which contrasts with the tinted card at about 3.69:1. Charcoal ■#283844 text contrasts with the card surface at about 9.46:1.
• Tour booking area: Give a short banner a deep blue-gray ■#435E70 background with white ■#FFFFFF introductory text. Add a white ■#FFFFFF booking card inside the banner, then use deep blue-gray ■#435E70 for the sign-up button and white ■#FFFFFF for its label. The button text and fill contrast at about 6.83:1.

In this layout, the cards share a consistent visual language, while the surrounding backgrounds change according to their purpose: comparison, supplementary details, or booking. Rather than introducing a different accent color for each card, use the size of the colored sections, spacing, and headings to establish hierarchy.

Check card boundaries separately from text contrast

If pale blue-gray and white do not create a sufficiently clear distinction between cards, start by adjusting the spacing between them and the placement of their headings. When adding an outline, decide whether it is merely decorative or necessary to understand information or recognize a control. WCAG (Web Content Accessibility Guidelines) 2.2 Level AA generally requires 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 against adjacent colors for visual cues needed to identify interface components. These requirements do not apply indiscriminately to every decorative line.

On mobile screens, stack the amenity cards vertically and keep clear space between card titles and descriptions. Do not indicate the type of facility or booking status through color alone; provide text labels as well. Check that groups remain recognizable in bright viewing conditions instead of relying only on very thin shadows or borders.

HueRoll lets you inspect HEX values and suggested palettes, and compare a selected color against white or black. It cannot directly calculate contrast between any two arbitrary colors or automatically assess WCAG compliance. The text, background, and border ratios used in this example have therefore been calculated separately.