What Colors Go with Mist Blue? Color Pairing Examples That Make Soft Blue Look Clean [#E3E7F2]

Mist Blue (in HEX, a web color code that begins with #, ■#E3E7F2) is a very light, softened blue. On an online storage file-sharing screen, limiting it to the selected file, a sharing-summary panel, and the main “Create sharing link” button can keep the soft blue as the focal color while making the interface look clean and organized. This example pairs it with deep slate blue, cool white, and muted rust.

Anchor the text with deep slate blue and separate supporting actions with rust

With ■#E3E7F2, one option is ■#38475C, called deep slate blue here, for headings and body text; cool white ■#FBFCFE for the page background; and ■#7A5148, called muted rust here, for secondary actions such as changing permissions or disabling a link.

■#38475C is a dark color with a blue cast. It stays relatively close to Mist Blue in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FBFCFE is nearly white with a slight cool cast, so it can cover large areas containing file names and sharing information without competing strongly with the pale blue. ■#7A5148 is a subdued reddish brown that can separate secondary actions such as “Change permissions” or “Disable link” from the blue primary action by hue.

Use Mist Blue for the selected file and primary sharing action

Set the page background and unselected file rows to ■#FBFCFE, and use ■#38475C for file names, modified dates, and sharing destinations. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 9.20:1.

For the selected file, the sharing-summary panel, and the main “Create sharing link” button, use ■#E3E7F2 as the background with ■#38475C for text and icons. The contrast ratio is about 7.63:1, above the 4.5:1 minimum for normal-size text.

However, ■#E3E7F2 against ■#FBFCFE is only about 1.20:1. Pale fills alone therefore do not make the selected file or primary-button boundary easy to distinguish. Add a ■#38475C border, a “Selected” label, and a check icon. That border against the page background has a contrast ratio of about 9.20:1.

For a secondary button such as “Change permissions,” use ■#7A5148 as the background with ■#FFFFFF text. The contrast ratio is about 6.78:1. The difference between ■#7A5148 and ■#FBFCFE is also about 6.60:1, helping primary and secondary actions remain visually distinct.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. For visual information required to identify UI (user interface) components and states, the non-text contrast criterion uses a 3:1 minimum against adjacent colors.

For a clean look, do not communicate selection with pale blue alone

■#E3E7F2 against ■#FFFFFF has a contrast ratio of about 1.24:1. Normal-size white text on a Mist Blue background therefore does not reach 4.5:1. In this example, the primary button uses ■#38475C for its text instead.

Also avoid communicating states such as “Selected,” “Shared,” or “Not shared” by color alone. Pair color with status text, borders, and check icons. Rather than covering the entire page with Mist Blue, reserve it for the selected file and primary actions, and leave generous ■#FBFCFE space around those elements. This helps keep the interface clean while the soft blue remains the main color. In HueRoll, you can enter ■#E3E7F2 and review related colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.