What Colors Go with Pale Mint? Color Pairings That Give Soft Mint a Clean, Fresh Look [#C9EDE0]

Pale Mint (in HEX, a web color code that begins with #, ■#C9EDE0) is a light, softened mint color. In a reservation form, limiting it to selected date-and-time cards and the main “Confirm booking” button can keep plenty of bright space around the interface while making the soft mint the focal color. This example pairs it with deep teal, mist white, and dusty rose.

Anchor the text with deep teal and separate secondary actions with dusty rose

With ■#C9EDE0, one option is deep teal ■#2F5148 for headings and body text, mist white ■#F8FCFA for the page and input backgrounds, and ■#8C4F56—called dusty rose here—for secondary actions such as changing the selected date and time.

■#2F5148 is a dark blue-green. It stays relatively close to Pale Mint in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#F8FCFA is nearly white with a slight green cast, so it can cover a large part of the form without competing strongly with the mint. ■#8C4F56 is a subdued red-purple, giving secondary actions such as “Change date and time” a different hue from the primary confirmation action.

Use Pale Mint for selected cards and the primary action in a reservation form

Set the page background and regular input fields to ■#F8FCFA, and use ■#2F5148 for labels, entered text, and instructions. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 8.49:1.

For the selected date-and-time card and the main “Confirm booking” button, use ■#C9EDE0 as the background with ■#2F5148 for text and icons. The contrast ratio is about 6.97:1, above the 4.5:1 minimum for normal-size text.

However, ■#C9EDE0 against ■#F8FCFA is only about 1.22:1. The difference between two pale fills alone is not enough to make the selected card easy to distinguish, so add a ■#2F5148 border, a check icon, and a “Selected” label. That border against the page background has a contrast ratio of about 8.49:1.

For a secondary button such as “Change date and time,” use ■#8C4F56 as the background with ■#FFFFFF text. The contrast ratio is about 6.24:1. The difference between ■#8C4F56 and ■#F8FCFA is also about 6.03:1, helping the secondary control remain distinct from the background.

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.

To keep the layout looking clean, do not rely on pale color differences alone

■#C9EDE0 against ■#FFFFFF has a contrast ratio of about 1.26:1. Normal-size white text on a Pale Mint background therefore does not reach 4.5:1. In this example, the primary button uses ■#2F5148 for its text instead.

Also avoid communicating states such as “Selected,” “Input error,” or “Booking confirmed” by color alone. Pair color with a status label, check icon, border, or other visible cue. Rather than covering the entire page with Pale Mint, reserve it for selected cards and the primary action, and leave generous ■#F8FCFA space around those elements. This helps prevent neighboring pale areas from losing their visual boundaries. In HueRoll, you can enter ■#C9EDE0 and review related colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare any two arbitrary colors or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.