What Colors Go with Vivid Spring Green? Color Pairings That Make Vibrant Fresh Green Look Lively [#3BFF1F]

Vivid Spring Green (■#3BFF1F) is an extremely bright fresh green with a yellow cast and high saturation, meaning strong color intensity. On an automated test results screen—a screen for checking whether changed software behaves as expected—it can work well when it is limited to the selected test, the primary “Run tests again” button, and accents for successful results. This gives the vibrant fresh green a lively role while keeping the results list and supporting information easy to organize. This example pairs it with Leaf White, Dark Olive, and Deep Violet.

Use Leaf White as the base, then tighten the fresh green with Dark Olive and violet

With ■#3BFF1F, one practical combination is Leaf White ■#F7FBF3 for the results-list background, Dark Olive ■#24321F for test names, run times, and borders, and Deep Violet ■#5B3D73 for secondary actions such as viewing previous test runs.

■#F7FBF3 is a very light color with a slight yellow-green cast, so it keeps test-result cards and surrounding space feeling light. ■#24321F is a low-saturation dark green, so it can organize test names, run times, target environments, and supporting text without competing with the main color. ■#5B3D73 is a dark violet. Its hue—the basic color family such as red, blue, or green—is separated from the fresh green while its saturation stays restrained, so a secondary action such as “View previous runs” can be distinguished from the primary rerun action.

On an automated test results screen, use Vivid Spring Green for the selected state and primary action

For a practical layout, use ■#F7FBF3 for the results list and unselected cards, then use ■#24321F for test names, run times, target environments, and descriptions. Their contrast ratio—a numerical measure of the relative brightness difference between foreground and background—is about 12.93:1.

Use ■#3BFF1F for the selected test card and the primary “Run tests again” button, with ■#24321F for the text and border. Their contrast ratio is about 10.00:1, well above the 4.5:1 minimum for normal-size text. However, ■#3BFF1F against ■#F7FBF3 is only about 1.29:1, so the fresh-green fill alone should not define a card or button edge on the light background. Use a ■#24321F border or icon as well. That border against ■#F7FBF3 is about 12.93:1.

For a secondary button such as “View previous runs,” use ■#5B3D73 as the background with ■#FFFFFF text. Their contrast ratio is about 8.90:1. Deep Violet against the page background is about 8.50:1, and ■#5B3D73 against ■#3BFF1F is about 6.57:1.

WCAG (Web Content Accessibility Guidelines) 2.2 requires a contrast ratio of at least 4.5:1 for normal-size text. Visual information needed to identify meaningful UI (user interface) components or graphical objects requires at least 3:1 against adjacent colors.

For a lively look, do not use fresh green alone to communicate pass, fail, or running states

■#3BFF1F and ■#FFFFFF have a contrast ratio of about 1.35:1, so normal-size white text should not be placed on the fresh-green background. Use ■#24321F for the primary-button text, and keep the same dark border when the control sits on a light page background.

Do not communicate results such as “passed,” “failed,” “running,” or “not run” through color alone. Pair color with status text, check marks, X marks, or progress icons. If ■#3BFF1F is used for a passed result, show the result label or symbol as well so the meaning does not depend on color alone. In HueRoll, you can enter ■#3BFF1F as a HEX color code (a Web color code beginning with #), then review related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA conformance, so the two-color contrast ratios in this article were calculated separately.