What Colors Go with Pale Spring Green? Color Pairings That Make Soft Fresh Green Look Refreshing [#CEEDC9]

Pale Spring Green (in HEX, a web color code that begins with #, ■#CEEDC9) is a light, softened green reminiscent of fresh foliage. On a help-center search page, limiting it to the selected category, search-tip cards, and the main “Search” button can keep the pale fresh green as the focal color while giving the interface a light, refreshing look. This example pairs it with dark green, soft ivory, and muted violet.

Anchor the text with dark green and separate roles with ivory and violet

With ■#CEEDC9, one option is ■#2F4A37, called dark green here, for headings and body text; soft ivory ■#FBFCF6 for the page background; and ■#6B4F8A, called muted violet here, for secondary actions such as contacting support.

■#2F4A37 is a dark green that stays relatively close to Pale Spring Green in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FBFCF6 is nearly white with a slight warm cast, so it can cover large areas containing search results or FAQ cards without competing strongly with the pale green. ■#6B4F8A is a subdued violet that can separate secondary actions such as “Contact support” or “View support options” from the green primary action by hue.

Use Pale Spring Green for the selected category and primary action

Set the page background and regular FAQ cards to ■#FBFCF6, and use ■#2F4A37 for question titles, descriptions, and search-result text. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 9.44:1.

For the selected category, search-tip cards, and the main “Search” button, use ■#CEEDC9 as the background with ■#2F4A37 for text and icons. The contrast ratio is about 7.69:1, above the 4.5:1 minimum for normal-size text.

However, ■#CEEDC9 against ■#FBFCF6 is only about 1.23:1. Pale fills alone therefore do not make the selected category or search button boundary easy to distinguish. Add a ■#2F4A37 border, a check icon, and a “Selected” label. That border against the page background has a contrast ratio of about 9.44:1.

For a secondary button such as “Contact support,” use ■#6B4F8A as the background with ■#FFFFFF text. The contrast ratio is about 6.75:1. The difference between ■#6B4F8A and ■#FBFCF6 is also about 6.54: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.

For a fresh look, do not rely on white text or pale fills alone to communicate state

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

Also avoid communicating states such as “Selected,” “Results found,” or “No results” by color alone. Pair color with status text, a check icon, and result counts. Rather than covering the entire page with Pale Spring Green, reserve it for selected categories and primary actions, and leave generous ■#FBFCF6 space around those elements. This helps keep the interface light while the pale fresh green remains the main color. In HueRoll, you can enter ■#CEEDC9 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.