Green Background
#008000 · rgb(0, 128, 0)
About the green background
Green (#008000) is the canonical green: the green channel at full, red and blue off. It's the color of growth, nature and 'good to go' — from traffic lights to success buttons to sustainability branding.
As a background it's darker than it looks: white text reaches about 5.1:1 (passing WCAG AA), while black text sits at about 4.1:1 — fine for large type but just under the AA bar for body copy. For dark-on-green text, lighten the green slightly.
What to use a green background for
- Sustainability, eco and outdoor branding
- Success states and confirmation screens
- Finance and 'growth' marketing
- Full-bleed nature-themed hero sections
How to use green in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page green background */
body {
margin: 0;
background-color: #008000;
}
/* A single section or element */
.hero {
background-color: rgb(0, 128, 0);
} Green shades and tints
Click any swatch to copy it. Tints mix green with white; shades mix it with black.
Green background FAQ
What is the hex code for green?
Pure web green is #008000 — rgb(0, 128, 0): the green channel fully on, red and blue off. It's also the CSS keyword `green`, so `background-color: green` gives the exact same color.
Is green a good background for text?
It depends on the text color: white on #008000 scores about 5.1:1 (WCAG AA pass), while black is about 4.1:1 — fine for large text, just under AA for body copy. For dark-on-green copy, use a lighter tint of green.
What is the hex code for green?
Green is #008000 in hexadecimal, rgb(0, 128, 0) in RGB and hsl(120, 100%, 25%) in HSL. Paste #008000 into any CSS background-color property to use it.
How do I set a green background in CSS?
Add background-color: #008000; to any element, or apply it to the whole page: body { background-color: #008000; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(0, 128, 0) — with identical results.