Using Olive Green in design
HEX
#808000
RGB
128, 128, 0
HSL
60°, 100%, 25%
HSV
60°, 100%, 50%
Olive green (#808000) is a warm, muted green-yellow that feels earthy, grounded, and mature. It works for brands in outdoor, military, heritage, and sustainability sectors that want to project reliability without flashiness.
Best for
Editorial design, magazine spreads, and premium print collateral.
Compare with
Accessibility
Check contrast before using olive green for text-heavy layouts, especially on low-contrast backgrounds.
How does olive green compare to nearby colors?
What is the difference between olive green and mocha?
Olive Green (#808000) looks cleaner and more charged than Mocha (#967117) when the two are shown together. Olive Green reads faster on screen, so it changes the palette from steady to attention-seeking more quickly than Mocha does. Choose olive green when the color needs to register quickly and act like the headline accent; keep mocha when the rest of the layout needs a quieter companion.
What color is olive green?
Olive green is strongly associated with military uniforms and equipment, having been the standard camouflage base color for decades. Named after the unripe olive fruit, it also carries associations with peace (olive branch) and Mediterranean culture.
What is the hex code for olive green?
| Format | Value |
|---|---|
| HEX | #808000 |
| RGB | rgb(128, 128, 0) |
| HSL | hsl(60°, 100%, 25%) |
| HSV / HSB | hsv(60°, 100%, 50%) |
| CMYK (approx.) | cmyk(0%, 0%, 100%, 50%) |
Convert Olive Green to other color formats
Open the color converter with Olive Green (#808000) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Olive Green in the color converter →What does olive green mean in design?
Olive green communicates resilience, earthiness, and understated strength. Unlike brighter greens that signal growth, olive suggests endurance and practicality. It carries dual associations of military discipline and Mediterranean warmth, making it versatile for outdoor, heritage, and lifestyle brands.
How do I use olive green in code?
| CSS (hex) | color: #808000; |
| CSS (rgb) | color: rgb(128, 128, 0); |
| CSS (hsl) | color: hsl(60, 100%, 25%); |
| RGB % | rgb(50%, 50%, 0%) |
| Tailwind | text-[#808000] |
| SwiftUI | Color(red: 0.502, green: 0.502, blue: 0.000) |
| UIKit | UIColor(red: 0.502, green: 0.502, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(128, 128, 0) |
| Compose | Color(0xFF808000) |
| Web Safe | #999900 |
Is olive green accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4.2:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaBlack text on this color | 5.01:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on white | 4.2:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on black | 5.01:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does olive green look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with olive green
Cream takes the hard digital edge off olive green and makes the color feel more printed, paper-backed, and approachable.
Rust shifts olive green away from a purely warm read and makes the combination feel more considered in real layouts.
White helps olive green stay legible in charts, labels, and UI states where a muddier light neutral would blur the edges.
What colors clash with olive green
Neon Green changes the meaning of olive green too abruptly, replacing the source color's finance, outdoors, and institutional systems cues with something much louder and less stable.
Magenta remaps olive green too aggressively, dragging it away from finance, outdoors, and institutional systems and into a brighter, more performative palette.
Cyan redirects olive green toward a more technical, backlit interpretation, which is risky when the goal is warmth, polish, or print-minded editorial work.
Pastel Pink can make olive green feel softer and sweeter than intended, which weakens palettes that rely on gravity or structure.
How should I use olive green in design?
- •Olive green works as a primary color for outdoor and heritage brands — pair with cream and brown for a natural palette.
- •Use olive as a background color with white or cream text for a warm, earthy alternative to traditional corporate palettes.
- •Combine olive with rust and gold for a rich autumn palette, or with navy for a more structured look.
What are good olive green palettes?
Midnight authority
Editorial design, magazine spreads, and premium print collateral.
Soft structure
Workshop handouts, training guides, and presentation templates.
Design with olive green in Moda
Create a presentation or document using olive green as your accent color. Moda's AI applies your color palette automatically.
Create a design with olive green →What are the shades and tints of olive green?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for olive green?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Avocado
Avocado is useful when olive green is the right weight but the wrong mood: the swap changes temperature and finish more than contrast.
Mocha
Mocha is almost the same hue as olive green; the real difference is value, with mocha feeling more open and surface-friendly.
Army Green
Army Green is nearly adjacent to olive green in hue; what separates them is intensity, with army green reading dustier and easier to extend across a layout.
Brown
Brown keeps roughly the same visual weight as olive green but changes the undertone story, which is often enough to move a palette from warmer and tactile to cooler and more technical, or the reverse.
Chocolate
Chocolate is useful when olive green is the right weight but the wrong mood: the swap changes temperature and finish more than contrast.
Frequently asked questions
What is the hex code for olive green?
The hex code for olive green is #808000. In RGB, that's 128 red, 128 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 0% magenta, 100% yellow, and 50% key (black).
Is olive green a warm or cool color?
Olive Green leans warm without feeling fully heat-driven, so you can push it warmer with cream, tan, or gold or balance it with cooler blues and slates.
Should olive green lead the palette or stay in supporting roles?
Olive Green has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does olive green work best in a layout?
Olive Green has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is olive green accessible?
Olive Green works better with dark text than white text. Black text reaches 5.01:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More green colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Green colors
Compare olive green with other green tones.
Blue colors
Explore nearby color families to build stronger palettes and contrasts.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.