Olive Green Hex Code: #808000 — Shades, Palettes & Copy-Paste
Olive green hex code is #808000 (RGB 128, 128, 0). Copy ten shades from pale yellow-green to deep dark olive, four palette pairings, and UI notes below.
CSS olive
Dark olive green
Moss
Olive Green = #808000
CSS named color olive — copy hex, RGB, or HSL for tokens and CSS.
Olive green shades (lightest → darkest)
Ten stops from pale yellow-green to deep dark olive. Copy any hex for backgrounds, borders, or UI tokens.
| Swatch | Shade | Hex |
|---|---|---|
| Pale yellow-green | #E8F0C8 | |
| Light khaki | #F0E68C | |
| Yellow green | #9ACD32 | |
| Olive drab | #6B8E23 | |
| Olive (CSS) | #808000 | |
| Dark olive green | #556B2F | |
| Army green | #4B5320 | |
| Moss green | #3D4A1F | |
| Deep olive | #2F2F1A | |
| Near-black olive | #1A1A12 |
Olive Green Palette Pairings
Four olive green combinations with copy-ready hex codes—warm clay, cool navy, muted sage, and earthy brown neutrals.
Olive + Terracotta + Cream
Mediterranean craft and food brands: olive structure (#808000), terracotta CTAs (#E2725B), cream reading surfaces (#FFF8F0). Add sand (#D4C4A8) for dividers if you need a fourth neutral.
Olive + Navy + Gold
Heritage outdoor and institutional trust: navy headers (#000080), olive secondary badges (#808000), gold rules (#FFD700) on white data panels.
Olive + Sage + Sand
Wellness and botanical UI: sage (#B2AC88) for calm backgrounds, olive for navigation, sand (#D4C4A8) for cards—keeps chroma lower than bright mint greens.
Olive + Brown + Beige
Military-adjacent and workwear aesthetics: brown typography (#5C4033) on beige (#F5F5DC), olive for accents and utility stripes—verify contrast on small type.
#808000 is the olive green hex code most designers need first. If you searched for olive green hex code, olive green color code, or olive hex, you want a value that reads as muted yellow-green—not bright lawn green and not gray sage. CSS resolves color: olive; to this exact hex. Deeper UI olives such as #556B2F and moss #3D4A1F often feel more premium on navigation than the mid-tone alone.
Olive green in UI & web design
Navigation and utility chrome. Olive works for outdoor retail headers, camping gear apps, and sustainability portals when you pair it with cream (#FFF8F0) content wells. White text on #808000 can pass WCAG AA for large bold labels—run your exact font through the contrast checker before shipping 14px body copy on olive bands.
Promotions with terracotta. Olive structure plus terracotta CTAs (#E2725B) signals Mediterranean warmth without neon orange. Keep product photography on neutral sand so two greens do not compete—see our terracotta hex guide for clay-tone ramps.
Maps, badges, and status. Use pale yellow-green rows from the shade table for map backgrounds; reserve #808000 for park boundaries and eco badges. For success states, prefer brighter yellow-green (#9ACD32) so users do not confuse confirmation with olive navigation.
Extend hover and disabled steps from #808000 in the palette generator so tints stay on the same yellow-green hue angle instead of drifting toward mint.
Olive green in branding
Olive evokes olive oil, dry grasslands, and utilitarian workwear—categories where authenticity beats hyper-saturated digital green. Pair with terracotta and cream for food and hospitality; navy and gold when you need institutional weight (think heritage universities and outdoor clubs). Avoid stacking olive with forest green (#228B22) in the same layout unless one is clearly secondary—two natural greens fight for “which is the eco brand color.”
Document web olive (#808000) separately from print Pantone or textile dyes; fabric olive often reads grayer under store lighting. When stakeholders ask for “army green,” show #4B5320 from the shade ladder rather than stretching #808000 darker in Photoshop.
FAQ
- What is the olive green hex code?
- The CSS named color olive is #808000, which is RGB(128, 128, 0) and HSL(60, 100%, 25%). Product teams often use darker olives such as #556B2F for navigation—document your canonical hex in a style guide.
- What colors pair with olive green?
- Terracotta (#E2725B), navy (#000080), cream (#FFF8F0), sage (#B2AC88), and warm brown (#5C4033) are reliable olive partners. Always verify text and button contrast with a WCAG checker.
- Is olive green the same as army green?
- Not exactly. Olive (#808000) is a balanced yellow-green at 25% lightness. Army green (#4B5320) is darker and grayer. Use separate tokens so UI hover states do not drift between them.
- Is olive green good for websites?
- Yes—for outdoor, sustainability, and heritage brands when used as structure—not as full-screen saturated fills. Pair with cream or off-white content wells and test white-on-olive text for accessibility.
Related colors
- Forest Green Hex Code — richer yellow-green for eco UI
- Sage Green Hex Code — muted gray-green partner for olive layouts
- Terracotta Hex Code — warm clay accent beside olive
Build your palette
Use our free tools to create and test your color palette.