What Colors Go with Deep Green? Color Pairing Examples That Make the Most of Deep Green’s Strength [#1B983A]

Deep Green (■#1B983A) is a strong green that keeps noticeable saturation while reducing brightness. On a website, it can work well for sports-club or team schedule and results pages, including team names, match-card headings, and primary “View Tickets” buttons, when you want more visual presence than a lighter green without making the page feel overly bright. However, ■#1B983A does not provide enough contrast for normal-size text on a light background, so it is easier to use as a primary-button or selected-surface background rather than as a general text color. This example pairs Deep Green with light sage white, ink green, and deep plum to make the most of the green’s strength while keeping match information organized.

Build on light sage white and separate roles with dark text and deep plum

With ■#1B983A, one practical combination is light sage white ■#F4F7F1 for the background, ink green ■#101512 for body copy and button text, and deep plum ■#3C2E46 for supporting actions.

■#F4F7F1 is a light color with a slight green cast, so it keeps schedules and match cards visually light. ■#101512 is an almost-black dark color, which helps organize opponents, dates, venues, and scores without turning every text level green. ■#3C2E46 is a dark plum that shifts away from green in hue while keeping saturation restrained, making it useful for distinguishing a secondary action from the main green control.

On schedule and results pages, concentrate Deep Green in primary actions and selected surfaces

Use ■#F4F7F1 across schedule-list and match-card backgrounds, then reserve ■#1B983A for the primary “View Tickets” button and selected-match-card backgrounds. Use ■#101512 for text on the green surface so normal-size text has sufficient contrast. Keep body copy, opponents, venues, and dates in ■#101512 as well, rather than using color alone to create information hierarchy.

For supporting UI (user-interface elements such as buttons and selection controls), a small ■#3C2E46 “View Details” button can sit on a ■#1B983A surface, with ■#F4F7F1 text.

A contrast ratio is the numerical difference in relative brightness between foreground and background colors. ■#1B983A against ■#101512 is about 4.92:1, ■#101512 against ■#F4F7F1 is about 17.07:1, and ■#3C2E46 against ■#F4F7F1 is about 11.62:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text, so the text combinations shown here meet that threshold. The contrast between ■#1B983A and ■#F4F7F1 is about 3.47:1, and the contrast between ■#1B983A and ■#3C2E46 is about 3.35:1, so these adjacent combinations also exceed the 3:1 threshold for visual information needed to identify meaningful UI components.

Make use of its strength without communicating results or selection through green alone

The contrast between ■#1B983A and ■#F4F7F1 is only about 3.47:1. Do not use ■#1B983A as normal-size body text on the light background; switch the text color to ■#101512 instead. Limiting green to primary buttons, selected cards, and borders makes it easier to preserve the strong visual character while keeping information easy to scan.

States such as “Win,” “Loss,” “Draw,” or “Selected” should not be distinguished by green, plum, or any other color alone. Add explicit result text, an icon, a symbol, or a stronger border so the meaning remains clear without relying on hue. In HueRoll, you can enter ■#1B983A as a HEX color code (a web color notation beginning with #), review related colors and palette suggestions, and compare the selected color with white or black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.