White and Green Website Color Schemes: Background and Button Combinations for a Clean Look
For a clean white-and-green website, start with white across most of the page and reserve deep green for headlines and the most important buttons. Problems arise when white cards are separated only by a nearly white green background, or when pale lettering is placed on green buttons. This guide compares two background-and-button arrangements for a gardening workshop booking page.
Keep the main background white and use deep green for headings and buttons
For this palette, white is #FFFFFF and deep green is #246347. HEX is a way of representing web colors with a hash sign followed by six hexadecimal digits. Deep green headings on white have a contrast ratio of about 7.12:1. A contrast ratio measures the difference in relative brightness between two colors and helps evaluate whether lettering stands out from its background.
Not every paragraph needs to be green. Dark charcoal #293930 on white #FFFFFF has a contrast ratio of about 12.19:1, making it possible to distinguish body text from the green headings. For a “Book a workshop” button, use deep green #246347 as the fill and white #FFFFFF lettering. This text-and-button pair has about 7.12:1 contrast, and the filled button is also clearly distinct from the surrounding white.
The aim is not to add more shades of green. Give the green a consistent job: identifying section headings and the main next step, while letting the large white areas organize the page.
Compare two background and button styles for a gardening workshop site
Imagine a website where visitors can learn about growing plants, check class dates and fees, and book a session. The following colors can keep those tasks distinct without introducing an entirely new accent hue.
| Role | Color and HEX | Where to use it |
|---|---|---|
| Main page background | #FFFFFF | A broad, open surface for photos and copy |
| Headings and primary button | #246347 | Use deep green in selected areas |
| Body text | #293930 | Descriptions, fees, dates, and details |
| Workshop list background | #E7F2EA | A lightly tinted section behind white cards |
| Essential outlines | #647D6C | Card edges and input field boundaries |
- White-led layout: Keep the top of the page white #FFFFFF, with the workshop title in deep green #246347 and the introduction in charcoal #293930. Fill the booking button with green #246347 and use white #FFFFFF lettering. For the class list, switch to a pale green #E7F2EA section and place white #FFFFFF workshop cards within it. Charcoal #293930 body text on the pale green area has about 10.62:1 contrast.
- Green-led introduction: Give a short introductory band a deep green #246347 background and use white #FFFFFF for the workshop title and short description. Inside this band, make the booking button white #FFFFFF with deep green #246347 lettering. Both the heading and the button lettering have about 7.12:1 contrast against their respective backgrounds. Below the band, switch back to white #FFFFFF so dates, prices, and detailed explanations are easy to scan.
The first option gives more room to introduce the workshops and their photographs. The second makes a short booking invitation more prominent at the top. In either case, define one main action and avoid repeating several competing dark-green buttons on every workshop card.
Check the edges of pale-green cards and the visibility of controls
A white #FFFFFF card on pale green #E7F2EA has a background contrast ratio of only about 1.15:1. If card boundaries are needed, a muted green-gray #647D6C outline offers about 4.48:1 contrast against white and 3.90:1 against pale green. Not every decorative card needs a border, though: spacing and headings may already make the grouping clear.
White #FFFFFF text on a lighter mint-green #BFDCC7 button has only about 1.47:1 contrast. A mint-green button next to white has the same low 1.47:1 surface contrast. Even in a gentle color scheme, use a deeper green #246347 fill for the primary action so the control is recognizable.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs a contrast ratio of at least 4.5:1, while large text needs 3:1. Visual information required to recognize an interface component, such as an essential input border, generally needs at least 3:1 against adjacent colors. Use written labels as well as color for states such as “Booked,” and verify buttons and fields on smaller screens.
HueRoll lets you adjust HEX colors, explore palette suggestions, and compare a selected color with white or black. It cannot compare any arbitrary pair of colors or automatically assess WCAG conformance. The pale-background, text, and outline ratios in this example were checked separately for each pair.