Green Website Color Schemes: 6 Palettes With Hex Codes

By Umair Ali Sadaqat · Updated November 6, 2026 · Editorial policy

Green website color palettes with hex codes, contrast-checked text pairs and use cases, so you can pick a green that stays readable and fits your brand.

Short answer: For a green website, use a deep green such as #166534 or #2D6A4F for buttons, links and headings, a tinted off-white such as #F6F4EC or #F0FDF4 for the background, and keep bright greens like #22C55E for dark backgrounds or decoration only. Dark greens on light backgrounds pass the WCAG AA 4.5:1 text threshold. Bright greens on white do not (#22C55E on white is 2.28:1).

Below are six green palettes with hex values, measured contrast ratios, and the kind of site each one suits. Every ratio was calculated with the WCAG relative-luminance formula, and you can verify any pair yourself in the color contrast checker.

Why green is tricky on screens

Green sits in the middle of the luminance range. A mid green looks vivid, but against white it is often too light for text, and against black it is often too dark. That is why a green that looks great in a logo can fail as a button color.

The practical rule: pick your green by its contrast ratio, not by how it looks in a swatch. For normal text, aim for 4.5:1 or higher. For large text (roughly 24px regular or 19px bold and up) and for UI components like input borders and icons, 3:1 is the minimum.

Six green website palettes with hex codes

Each palette lists a background, a text color, an accent for buttons or links, and the contrast ratio for the pair that matters.

1. Forest and cream (editorial, outdoor, food)

Role	Hex	Pair and ratio
Background	#F6F4EC
Text and headings	#1B4332	on background: 10.06:1
Button / link	#2D6A4F	white text on it: 6.39:1
Soft panel	#95D5B2	#1B4332 text on it: 6.56:1

Warm, calm and readable. The cream background keeps it from feeling clinical. Good for restaurants, farm shops, travel, and long-form content sites.

2. Fresh mint (wellness, clinics, health content)

Role	Hex	Pair and ratio
Background	#F0FDF4
Text and headings	#14532D	on background: 8.70:1
Button	#15803D	white text on it: 5.02:1
Dark band	#052E16	#DCFCE7 text on it: 13.57:1

Light and clean. The button green is only just above AA, so keep button labels at a normal-or-heavier weight and avoid placing it on tinted panels.

3. Sage and olive (studios, interiors, handmade goods)

Role	Hex	Pair and ratio
Background	#E9F5DB
Text and headings	#31572C	on background: 7.33:1
Button	#4F772D	white text on it: 5.24:1
Highlight	#90A955	#132A13 text on it: 5.84:1

A muted, earthy palette. Works well for portfolios and boutique brands where you want green without it shouting.

4. Deep green dark theme (fintech, SaaS, premium)

Role	Hex	Pair and ratio
Background	#081C15
Text	#B7E4C7	on background: 12.58:1
Accent / links	#40916C	on background: 4.62:1
Card	#1B4332	#95D5B2 text on it: 6.56:1

Dark backgrounds let mid greens work as accents. Note that #40916C passes on #081C15 but fails on white (3.83:1), so do not reuse it on a light section.

5. Neon lime on dark green (events, creators, youth brands)

Role	Hex	Pair and ratio
Background	#1A2E05
Headline / button	#A3E635	on background: 9.69:1
Alternate bright	#22C55E	on #052E16: 6.54:1

High energy and very legible, because the light lime sits on a dark base. Use it sparingly: a whole page of lime tires the eye quickly.

6. Teal green (SaaS, health tech, sustainability)

Role	Hex	Pair and ratio
Background	#CCFBF1
Text and headings	#134E4A	on background: 8.41:1
Button	#0F766E	white text on it: 5.47:1

Leans blue-green, which reads more technical and less "nature". A good fit when you want green without the organic feel.

Green shades that fail, and what to use instead

Fails	Pair	Ratio	Swap for
Bright green button	#22C55E with white text	2.28:1	#15803D with white text (5.02:1)
Lime link on white	#65A30D on white	3.09:1	#4D7C0F on white (4.99:1)
Mid green body text	#40916C on white	3.83:1	#2D6A4F on white (6.39:1)

The mid-tone ones still pass the 3:1 bar, so they are acceptable for large headlines, icons and borders, just not for paragraph text or small links. For more on what goes wrong, see bad color contrast examples, and for stronger pairings in general, the high contrast color palettes guide.

How to build your own green palette, step by step

Choose the job of green first. Is it the brand color, the action color, or just an accent? Brand-only greens can be any shade. Action greens must pass contrast.
Pick a dark anchor. Start with a green around #14532D to #2D6A4F. This becomes your heading, link and button color on light backgrounds.
Tint your background. Use a very light green or a warm cream instead of pure white, for example #F0FDF4 or #F6F4EC. Re-check text contrast after tinting.
Add one accent that is not green. Amber or terracotta against green gives buttons separation on pages with lots of green. Verify the label contrast: for example #92400E text on #FEF3C7 measures 6.37:1.
Test every text-on-background pair. Run headings, body, links, buttons and placeholder text through a checker. Anything under 4.5:1 at body size needs a darker or lighter shade.
Check the hover and disabled states. Hover shades often drift into failing territory.
Save the palette as named tokens. Using variable names such as brand-900, brand-700 and brand-100 makes later changes a one-line edit. Our Tailwind CSS colors guide shows the shade-scale idea, and several hexes above come from that style of scale.

Which green for which kind of site

Sustainability, energy, nonprofits: forest and cream, or sage. Real examples of the mood are in our Greenfield Renewables template.
Health and wellness: fresh mint or teal green.
Finance and SaaS: deep green dark theme, with a single bright accent.
Food, farm, garden: forest and cream with a warm accent.
Creator and event pages: neon lime on dark green, kept to headlines and one button.

Copyable checklist before you publish

[ ] Body text is at least 4.5:1 against its background
[ ] Large text and icons are at least 3:1
[ ] Button labels pass 4.5:1 against the button fill
[ ] Links are distinguishable from body text by more than color alone (underline works)
[ ] Bright greens appear only on dark backgrounds or as decoration
[ ] No more than one accent color besides green
[ ] Dark sections use their own tested pairs, not recycled light-mode ones
[ ] The palette is saved as named tokens so it can be changed in one place

If you are not sure how many colors a site needs overall, the website color schemes guide covers the basics, and the color palette glossary entry defines the terms used here.

Putting a green palette on a real site

Once you have your hex codes, you need somewhere to apply them. We.Inc's free plan lets you publish up to three sites from ready-made templates; the AI builder that drafts a site from a prompt starts on the Starter plan at $20 a month. You can sign up here and paste your background, text and button hexes into the site styles, then run the same contrast checks on the published pages.

Frequently asked questions

What is the best green for a website?

There is no single best green, but a deep, slightly desaturated green such as #166534 or #2D6A4F is the safest starting point. Both pass the WCAG AA 4.5:1 text threshold against white (7.13:1 and 6.39:1), so they work for buttons, links and headings. Bright greens like #22C55E fail against white (2.28:1) and are better kept for icons or dark backgrounds.

What colors go well with green on a website?

Warm off-whites and creams (#F6F4EC), near-black greens (#081C15), and a single warm accent such as amber or terracotta all pair well. Keep neutrals tinted toward green instead of pure gray so the page feels cohesive, and limit the accent to one action color.

Is green accessible for text?

Dark greens are, light and mid greens often are not. WCAG 2 AA asks for at least 4.5:1 for normal text and 3:1 for large text and interface components. Test every pair rather than judging by eye, because mid-tone greens like #40916C (3.83:1 on white) sit in the zone where they pass only for large text.

What does green communicate in web design?

Green is most commonly associated with nature, growth, health, sustainability and money, which is why it appears so often on wellness, finance, energy and outdoor sites. Meaning shifts with shade: deep forest greens read as established and calm, while lime reads as energetic and modern. Treat these as conventions, not guarantees, and test with your own audience.

Should I use green for call-to-action buttons?

You can, as long as the button stands out from the rest of the page and its label passes contrast. A dark green button with white text works on light pages. On a page that is mostly green, a warm accent button often separates better. Check our guide on conversion-friendly color schemes for how to decide.

Do I need a dark mode green palette?

Not required, but dark green backgrounds are a popular design choice on their own. If you offer one, do not simply reuse the light palette: bright greens that fail on white often work well on near-black green, for example #22C55E on #052E16 measures 6.54:1.

Related guides and tools

Start building

How we research, test and update this page: our editorial policy. We.Inc is our own product.