What Colors Go with Pure Green? Color Pairing Examples That Make Clear Green Stand Out with a Fresh Look [#00FF40]

Pure Green (■#00FF40) is an extremely bright, vivid green with a slight shift toward cyan. In a customer-support chat inbox, it can work well for the selected conversation, the primary “Send Reply” button, and the item currently being operated, helping clear green stand out with a fresh look. Because its lightness is close to that of a near-white background, however, a green fill alone should not be used to define selection states or button boundaries. This example combines Pure Green with Forest Graphite, Frost White, and Deep Plum.

Use Forest Graphite for clear edges, then separate roles with a light background and Plum

One possible combination for ■#00FF40 is Forest Graphite ■#13251A for body text, conversation titles, and outlines, Frost White ■#F6FBF7 for the screen and message-list background, and Deep Plum ■#6B426E for secondary actions.

■#13251A is a low-saturation dark color with a slight green cast, so text and icons remain restrained even on the vivid green surface. ■#F6FBF7 is a very light color with a faint green cast, keeping the conversation list and reading area visually light while preserving a connection to the main color. ■#6B426E is a dark red-violet. Its hue (the basic color family, such as red, blue, or green) is separated from green, so actions such as escalation or viewing history can be shown as a different role without competing with the primary accent.

In a chat inbox, concentrate Pure Green in the selected conversation and primary reply action

For a concrete layout, use ■#F6FBF7 for the overall inbox and unselected conversation cards. Use ■#00FF40 for the selected conversation, the primary “Send Reply” button, and the currently active tab. Set text and icons on the green surface to ■#13251A. The contrast ratio (the relative lightness difference between text or a visual component and its background) is about 11.76:1, which exceeds the 4.5:1 minimum for normal-size text.

Use ■#13251A for customer names, message text, received times, and assignee names. Against ■#F6FBF7, the ratio is about 15.35:1. For secondary actions such as “Escalate” or “View History,” use ■#6B426E as the background with ■#FFFFFF text. That pair is about 7.99:1, and Deep Plum against the page background is about 7.63:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text. Visual information needed to identify a meaningful UI (user interface) component or graphic must also reach at least 3:1 against adjacent colors.

To keep the look fresh, retain dark outlines on light surfaces and do not communicate states with color alone

■#00FF40 against ■#F6FBF7 has a contrast ratio of about 1.30:1, and ■#00FF40 against ■#FFFFFF is only about 1.37:1. If a green button or selected card is placed on a light screen, do not rely on the fill alone to define its boundary; combine it with ■#13251A outlines, text, and icons. Normal-size white text should also be avoided on this vivid green.

Conversation states such as “In Progress,” “On Hold,” and “Resolved” should not be communicated only by green and plum. Add explicit status text, check marks, clock icons, or other non-color cues. ■#00FF40 and ■#6B426E have a contrast ratio of about 5.85:1, but the meaning of a state should still not depend on color difference alone. In HueRoll, you can enter ■#00FF40 as a HEX color code (a web color notation beginning with #), then review related colors, color-scheme suggestions, and the selected color’s contrast against white and black. HueRoll does not automatically compare arbitrary pairs of colors or judge AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.