What Color Should You Add to a Green and Brown Color Scheme? Choosing an Accent That Keeps a Natural Feel

Green and brown can suggest plants and wood, but a web page or banner may feel heavy when both colors are dark. A light ivory, a subdued yellow, or a pale blue-green can provide a useful third color. Here we keep the same green and brown throughout and compare how one additional color—and where it is placed—changes the result without losing an earthy character.

Choose a third color by its brightness and intended role

We will use deep green ■#315C45 and dark brown ■#604434 as our starting pair. HEX codes are hexadecimal values used to specify web colors; these are example shades chosen for comparison. Green and brown have a contrast ratio—an expression of the difference in relative brightness between two colors—of only about 1.16:1. Small brown letters placed directly on the green background therefore have too little lightness contrast.

Rather than forcing these dark colors on top of each other, choose a third color that creates a separate, lighter area. A relatively subdued shade can help keep the focus on the original green and brown. Saturation means how vivid or intense a color appears.

• Warm ivory ■#F5EFE2: For bright, spacious backgrounds and breathing room.
• Soft yellow ■#E8CF86: For a headline or action that needs attention on a dark green section.
• Pale blue-green ■#D9E9E5: For a slightly cooler feeling in plant-related information.

Three practical examples using green, brown, and one accent

Add ivory: A seasonal vegetable subscription page

Set the background to warm ivory ■#F5EFE2, the heading to deep green ■#315C45, and the descriptive text to dark brown ■#604434. Fill the “View Details” button with deep green ■#315C45 and make its label ivory ■#F5EFE2. The broad light area gives product photography and paragraphs some room.

Deep green heading text on ivory has a contrast ratio of about 6.67:1, and brown body text on ivory has about 7.72:1. The button label against its green background is also about 6.67:1.

Add soft yellow: A forest harvest market banner

Use deep green ■#315C45 for the main background and soft yellow ■#E8CF86 for the headline and short description. Fill the event button with yellow ■#E8CF86 and use dark brown ■#604434 only for its label. Yellow draws attention against green, while the brown lettering stays on the lighter button instead of being placed directly on green.

Yellow text on deep green provides about 4.99:1 contrast, and brown text on the yellow button provides about 5.77:1. Avoid putting brown text directly on the green background.

Add pale blue-green: An introductory gardening class page

Make pale blue-green ■#D9E9E5 the background, dark brown ■#604434 the heading color, and deep green ■#315C45 the explanatory text color. Use dark brown ■#604434 for the “Explore the Class” button background, with pale blue-green ■#D9E9E5 lettering. This is a way to introduce a soft, cool area while letting brown identify the primary action.

Brown heading text on pale blue-green has about 7.05:1 contrast, while green explanatory text on the same background has about 6.09:1. Also use font size and weight—not only text color—to distinguish the heading from the paragraph.

Keep the natural feel while checking text and buttons

The colors do not need equal areas. Use ivory or pale blue-green widely when you want a brighter page; on a short announcement with a dark background, reserve soft yellow for headings and a button. If photographs already contain a lot of deep leaf green or earthy brown, reduce decorative colored areas and add space between elements rather than introducing more hues.

Contrast needs to be checked between text and the color immediately behind it. WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, one of its accessibility conformance levels, generally requires at least 4.5:1 for normal-sized text and 3:1 for qualifying large text. Essential non-text boundaries that identify controls may need 3:1 against adjacent colors. Do not make color the only indication of an action; use a descriptive label on each button.

HueRoll allows you to adjust a color using its HEX code and compare the selected color with white or black. It cannot directly compare two arbitrary colors or automatically check WCAG Level AA compliance. The ratios for green, brown, and the third colors here were calculated separately. Review the actual background, heading, paragraph, and button combinations on the finished page.