What Colors Go with Mist Cyan? Color Pairings That Highlight the Clear, Airy Look of Light Blue [#E3F2F2]

Mist Cyan (in HEX, a web color code that begins with #, ■#E3F2F2) is a very light, softened cyan. On a customer-support inbox, limiting it to the selected inquiry, a response-summary panel, and the main “Send reply” button can keep the pale aqua as the focal color while preserving a clear, airy look. This example pairs it with deep teal, ice white, and muted plum.

Anchor the text with deep teal and separate supporting actions with plum

With ■#E3F2F2, one option is ■#324E52, called deep teal here, for headings and body text; ice white ■#FAFDFD for the page background; and ■#6A536C, called muted plum here, for secondary actions such as opening response history or changing the assigned agent.

■#324E52 is a dark color with a blue-green cast. It stays relatively close to Mist Cyan in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FAFDFD is nearly white with a slight aqua cast, so it can cover large areas containing inquiry subjects and message excerpts without competing strongly with the pale cyan. ■#6A536C is a subdued purple that can separate secondary actions such as “View response history” or “Change assignee” from the aqua primary action by hue.

Use Mist Cyan for the selected inquiry and primary reply action

Set the page background and unselected inquiry rows to ■#FAFDFD, and use ■#324E52 for subjects, sender names, update times, and message excerpts. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 8.75:1.

For the selected inquiry, the response-summary panel, and the main “Send reply” button, use ■#E3F2F2 as the background with ■#324E52 for text and icons. The contrast ratio is about 7.77:1, above the 4.5:1 minimum for normal-size text.

However, ■#E3F2F2 against ■#FAFDFD is only about 1.13:1. Pale fills alone therefore do not make the selected row or primary-button boundary easy to distinguish. Add a ■#324E52 border, status text such as “Selected” or “In progress,” and a check icon. That border against the page background has a contrast ratio of about 8.75:1.

For a secondary button such as “View response history,” use ■#6A536C as the background with ■#FFFFFF text. The contrast ratio is about 6.85:1. The difference between ■#6A536C and ■#FAFDFD is also about 6.70: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 an airy look, do not communicate support status with pale aqua alone

■#E3F2F2 against ■#FFFFFF has a contrast ratio of about 1.15:1. Normal-size white text on a Mist Cyan background therefore does not reach 4.5:1. In this example, the primary button uses ■#324E52 for its text instead.

Also avoid communicating states such as “Open,” “In progress,” or “Resolved” by color alone. Pair color with status text, borders, and icons. Rather than covering the entire page with Mist Cyan, reserve it for the selected inquiry and primary actions, and leave generous ■#FAFDFD space around those elements. This helps preserve the light, transparent-looking quality of the pale aqua while keeping the information hierarchy clear. In HueRoll, you can enter ■#E3F2F2 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.