Olive Background
#808000 · rgb(128, 128, 0)
About the olive background
Olive (#808000) is equal parts green channel and... actually, half green with red and blue off — rgb(128, 128, 0) — producing that distinctive earthy yellow-green. It's utilitarian, natural and quietly military.
As a background it's dark enough to need light text: white on olive reaches about 4.2:1 — fine for large type and UI, though slightly under the AA bar for body copy — while cream and khaki tones complete the utilitarian palette.
What to use a olive background for
- Utility, outdoor and military-inspired brands
- Earthy autumn palettes with rust and mustard
- Natural food and sustainability packaging
- Muted dark sections in warm-toned sites
How to use olive in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page olive background */
body {
margin: 0;
background-color: #808000;
}
/* A single section or element */
.hero {
background-color: rgb(128, 128, 0);
} Olive shades and tints
Click any swatch to copy it. Tints mix olive with white; shades mix it with black.
Olive background FAQ
What is the hex code for olive?
CSS `olive` is #808000 — rgb(128, 128, 0): green at 50% with red equally present and no blue at all, which is what gives it the yellow cast.
What colors go with olive green?
Cream, mustard, rust, tan and brown build a warm earthy palette. For text, white measures about 4.2:1 on olive — passable for large text; darken the olive slightly (e.g. #6B6B00) to clear AA for body copy.
What is the hex code for olive?
Olive is #808000 in hexadecimal, rgb(128, 128, 0) in RGB and hsl(60, 100%, 25%) in HSL. Paste #808000 into any CSS background-color property to use it.
How do I set a olive background in CSS?
Add background-color: #808000; to any element, or apply it to the whole page: body { background-color: #808000; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(128, 128, 0) — with identical results.