Lime Green and Navy Color Schemes: How to Use a Small Accent Effectively
Lime green and navy combine a bright yellow-green and a deep blue. A banner does not have to be largely lime green for the accent to stand out. Use it for a small event-status badge or a short line beneath a headline, while leaving the navy background and the main information clear. Here is a practical approach for an online streaming-event announcement.
Keep lime green as a small information marker
This example uses lime green #B7EA4D and navy #1C2F49. The names do not represent universally fixed color codes. HEX means the web color format consisting of a hash sign and six hexadecimal digits. The contrast ratio between these colors is about 9.59:1. This ratio measures the relative difference in brightness between two colors.
A lime green #B7EA4D badge on navy #1C2F49 can contain navy lettering with the same 9.59:1 contrast. Let white carry the large event headline, use a light supporting color for the date, and reserve lime green for the words “Registration open” and a short accent line. Giving each color a specific role helps clarify which information visitors should notice first.
Calculate how much of an event banner the accent occupies
Imagine a 1,200 × 400 px banner for a live online event. Here, px means pixels, the units used for on-screen dimensions. On the left, place the event name, start time, and a “Reserve a viewing spot” button; on the right, a speaker photograph. Keep important text off the photograph.
| Role | Color and HEX | Where to use it |
|---|---|---|
| Lime green | #B7EA4D | Small “Registration open” badge and short line |
| Navy | #1C2F49 | Main background, headings, and buttons |
| Pale off-white | #F6F8F2 | Light background and spacing |
| White | #FFFFFF | Lettering against navy |
| Muted blue-gray | #435260 | Description on light backgrounds |
| Pale gray-green | #DDE5DA | Event details on navy |
A “Registration open” badge filled with lime green and measuring 132 × 36 px covers about 0.99% of the banner. A short line measuring 280 × 6 px adds about 0.35%. Together, the two elements occupy about 1.34% of the banner area. These are concrete layout examples, not a fixed rule for the correct percentage of an accent color.
- Navy-led version: Use navy #1C2F49 over the large left panel and white #FFFFFF for the event headline; their contrast is about 13.53:1. Display the start time in pale gray-green #DDE5DA, which contrasts with navy at about 10.50:1. Fill the “Registration open” badge with lime green #B7EA4D and use navy #1C2F49 text. Add a short lime green line beneath the heading. Make the reservation button white #FFFFFF with navy #1C2F49 lettering rather than creating a second competing green block.
- Off-white-led version: Use pale off-white #F6F8F2 as the broad background and navy #1C2F49 for the heading, giving about 12.65:1 contrast. Supporting text in muted blue-gray #435260 has about 7.51:1 contrast with the light background. Lime green #B7EA4D against off-white reaches only about 1.32:1, so add a navy #1C2F49 outline to the green status badge; the border contrasts with off-white at about 12.65:1. Keep the badge text navy, and use a navy reservation button with white #FFFFFF lettering.
The lime green accent stands apart naturally in the navy version. In the off-white version, the status badge needs a more visible edge. Either way, retain the words “Registration open” so status is not communicated by color alone.
Check pale backgrounds, text contrast, and the mobile layout
Lime green #B7EA4D and white #FFFFFF differ by only about 1.41:1, so white text on a lime green badge fails the normal text contrast requirement. Lime green against pale off-white #F6F8F2 has only about 1.32:1 contrast, which is also too subtle to be the only indication of an important state.
Muted blue-gray #435260 copy that works on off-white should not be transferred unchanged onto a navy #1C2F49 panel: their contrast is only about 1.68:1. On navy, use white #FFFFFF or pale gray-green #DDE5DA lettering instead.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally requires at least 4.5:1 contrast and large text at least 3:1. Visual cues necessary to identify meaningful graphics or interface components generally need at least 3:1 against adjacent colors. A purely decorative line does not automatically have that requirement. When adapting the banner for mobile, prioritize the written status badge and headline rather than trying to preserve an extremely thin decorative line.
HueRoll lets you edit HEX values, explore palette suggestions, and check the contrast between a selected color and white or black. It does not directly compare arbitrary custom color pairs or automatically report WCAG conformance. The color combinations in this example were calculated separately.