What Colors Go with Mist Azure? Combinations That Make Pale Sky Blue Look Clean [#E3ECF2]

Mist Azure (in HEX, a web color code that begins with #, ■#E3ECF2) is a very light, softened sky blue. On a delivery-tracking page, limiting it to the current delivery step, a shipment-summary panel, and the main “View delivery details” button can keep the pale sky blue as the focal color while giving the interface a clean look. This example pairs it with deep slate, cool white, and muted copper.

Anchor the text with deep slate and separate supporting actions with copper

With ■#E3ECF2, one option is ■#34495A, called deep slate here, for headings and body text; cool white ■#FBFCFD for the page background; and ■#7A5642, called muted copper here, for secondary actions such as contacting the carrier or checking delivery options.

■#34495A is a dark gray with a blue cast. It stays relatively close to Mist Azure in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FBFCFD is nearly white with a cool cast, so it can cover large areas containing tracking history and address information without competing strongly with the pale sky blue. ■#7A5642 is a subdued reddish brown that can separate secondary actions such as “Contact carrier” or “Check delivery options” from the sky-blue primary action by hue.

Use Mist Azure for the current delivery step and primary action

Set the page background and not-yet-reached delivery steps to ■#FBFCFD, and use ■#34495A for status text, timestamps, and supporting notes. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 9.10:1.

For the current delivery step, the shipment-summary panel, and the main “View delivery details” button, use ■#E3ECF2 as the background with ■#34495A for text and icons. The contrast ratio is about 7.81:1, above the 4.5:1 minimum for normal-size text.

However, ■#E3ECF2 against ■#FBFCFD is only about 1.17:1. Pale fills alone therefore do not make the current delivery step or primary-button boundary easy to distinguish. Add a ■#34495A border, labels such as “Current location” or “In transit,” and an icon that marks the current position. That border against the page background has a contrast ratio of about 9.10:1.

For a secondary button such as “Contact carrier,” use ■#7A5642 as the background with ■#FFFFFF text. The contrast ratio is about 6.49:1. The difference between ■#7A5642 and ■#FBFCFD is also about 6.32: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 or the current position, the non-text contrast criterion uses a 3:1 minimum against adjacent colors.

For a clean look, do not communicate delivery status with pale sky blue alone

■#E3ECF2 against ■#FFFFFF has a contrast ratio of about 1.20:1. Normal-size white text on a Mist Azure background therefore does not reach 4.5:1. In this example, the primary button uses ■#34495A for its text instead.

Also avoid communicating states such as “Collected,” “In transit,” or “Delivered” by color alone. Pair color with status text, step numbers, and an icon that marks the current position. Rather than covering the entire page with Mist Azure, reserve it for the current step and primary actions, and leave generous ■#FBFCFD space around those elements. This helps keep the interface clean while the pale sky blue remains the main color. In HueRoll, you can enter ■#E3ECF2 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.