What Colors Go with Pale Green? Color Pairing Examples That Keep Soft Green Natural and Balanced [#C9EDD2]

Pale Green (in HEX, a web color code that begins with #, ■#C9EDD2) is a light, softened green. On an online course progress page, reserving it for a progress summary card, the current lesson, and the main “Next lesson” button can keep the interface calm while making the green the focal color. This example pairs it with dark forest, warm ivory, and clay brown.

Anchor the text with dark forest and separate roles with ivory and brown

With ■#C9EDD2, one option is ■#304A36, called dark forest here, for headings and body text; warm ivory ■#FCFBF5 for the page background; and ■#8B5B4D, called clay brown here, for secondary actions such as reviewing earlier material.

■#304A36 is a dark green that stays relatively close to Pale Green in hue (the basic family of color, such as red, blue, or green) while creating a much larger lightness difference. ■#FCFBF5 is nearly white with a slight warm cast, so it softens the page background a little without competing strongly with the pale green. ■#8B5B4D is a muted reddish brown that can separate secondary actions such as “Review lesson” or “Back to list” from the green primary action by hue.

Use Pale Green for progress summaries and the current lesson

Set the page background and regular lesson list to ■#FCFBF5, and use ■#304A36 for course names, lesson titles, and descriptions. The contrast ratio (a measure of the relative brightness difference between foreground and background colors) is about 9.38:1.

For the progress summary card, the current lesson, and the main “Next lesson” button, use ■#C9EDD2 as the background with ■#304A36 for text and icons. The contrast ratio is about 7.66:1, above the 4.5:1 minimum for normal-size text.

However, ■#C9EDD2 against ■#FCFBF5 is only about 1.23:1. Pale fills alone therefore do not make the current lesson or selected card easy to distinguish. Add a ■#304A36 border, a “Current lesson” label, and an icon that marks the current position. The border against the page background has a contrast ratio of about 9.38:1.

For a secondary button such as “Review lesson,” use ■#8B5B4D as the background with ■#FFFFFF text. The contrast ratio is about 5.67:1. The difference between ■#8B5B4D and ■#FCFBF5 is also about 5.47: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 calm result, do not communicate progress or status with pale green alone

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

Also avoid communicating states such as “Current lesson,” “Complete,” or “Incomplete” by color alone. Pair the color with text, a check icon, and progress numbers. Rather than covering the entire page with Pale Green, reserve it for the progress summary, current position, and primary action, and leave generous ■#FCFBF5 space around those elements. This helps keep the boundaries between pieces of information visible while the pale green remains the main color. In HueRoll, you can enter ■#C9EDD2 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.