What Colors Go with Rich Chartreuse? Color Pairing Examples That Naturally Highlight Deep Yellow-Green [#66B814]

Rich Chartreuse (■#66B814) is a vivid, deeper yellow-green. On a website, it can work well in a hiking route-planning app for the selected trail, highlighted distance or duration, and a primary “Save route” button. Used this way, the color can keep a strong natural character while helping route information stay organized. However, a Chartreuse fill by itself may not create enough contrast against a pale background to define buttons or selected cards clearly. Here, we pair Rich Chartreuse with Pale Trail Ivory, Forest Charcoal, and Clay Beige to keep the palette natural while making important UI boundaries easier to identify.

Use Pale Trail Ivory as the base and earthy beige to support the yellow-green naturally

One practical combination pairs ■#66B814 with Pale Trail Ivory ■#F8FAF2 for the background, Forest Charcoal ■#2E3524 for body text and borders, and Clay Beige ■#C9A28F for secondary controls.

■#F8FAF2 is a very light color with a faint yellow-green cast, so it keeps a visual relationship with Chartreuse while working well across maps and trail-information areas. ■#2E3524 is a low-saturation dark color with a green cast, making it useful for trail names, elevation gain, distance, and warnings without turning every text element green. ■#C9A28F is a muted earthy beige with a red undertone. Its hue sits away from yellow-green while its saturation stays restrained, so it can add gentle variation to secondary buttons and rest-point labels.

In a route-planning screen, reserve Rich Chartreuse for the current trail and primary action

For a practical layout, use ■#F8FAF2 across trail lists and information cards, then apply ■#66B814 to the selected trail, highlighted distance or duration, and the background of a primary “Save route” button. Use ■#2E3524 for text on the Chartreuse background: the contrast ratio is about 5.11:1, which meets the requirement for normal-sized text. Elevation gain, difficulty, and safety notes can also use ■#2E3524 so Chartreuse stays focused on the main emphasis.

For secondary UI (user-interface elements such as buttons and trail selectors), use ■#C9A28F for a button such as “View rest points,” with both text and border in ■#2E3524. Adding the same dark border to the Rich Chartreuse button also prevents its boundary from depending only on the yellow-green fill against the pale background.

A contrast ratio expresses the difference in relative luminance between text or a UI element and its background. ■#2E3524 against ■#F8FAF2 is about 12.08:1, ■#2E3524 against ■#66B814 is about 5.11:1, and ■#2E3524 against ■#C9A28F is about 5.48:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-sized text, so the text combinations shown here meet that threshold.

For a natural result, do not rely on yellow-green and earth-tone fills alone to identify trail states

■#66B814 against ■#F8FAF2 has a contrast ratio of about 2.37:1, while ■#C9A28F against ■#F8FAF2 is about 2.20:1. Visual information required to identify meaningful UI components needs at least 3:1 against adjacent colors, so avoid relying on either fill alone to define a button or card on this pale background. Adding a ■#2E3524 border and text provides a clearer boundary.

Likewise, states such as “selected,” “caution,” and “closed” should not be communicated only through Chartreuse-versus-Clay Beige color differences. Pair color with state text, icons, line styles, warning symbols, or other non-color cues. If trail maps or mountain photography already contain a lot of yellow-green, leaving generous ■#F8FAF2 space can separate the imagery and map from the controls better than extending ■#66B814 across the whole page. In HueRoll, you can enter ■#66B814 as a HEX color (a web color code beginning with #), then inspect related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary pairs of colors or automatically label them AA or AAA, so the pairwise ratios in this article were calculated separately.