Olive Green Color Palette

Olive green is a dark, yellow-leaning green with a brown cast. The CSS keyword olive is #808000 — pure yellow-green held at 25% lightness — and it appears in the Muted Olive set below. Copy the HEX codes from any scheme below, or generate a harmonious olive palette anchored to your own base colour.

Olive Green Palette Ideas & HEX Codes

Classic Olive is the tightest, 69°–78° hue with a light #9AA86A on top. Olive & Sage extends that further into sage territory at #C5D0A0. Muted Olive is the widest, running from the pure #808000 to a near-cream #EDEAD0.

Classic Olive

#333D1B
#4B5320
#6B7A2E
#708238
#9AA86A

Olive & Sage

#3E4A24
#5A6B36
#708238
#9CA766
#C5D0A0

Muted Olive

#5F6B2E
#808000
#A3B565
#CBD18F
#EDEAD0

Anchored to an olive green base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.

Free, no sign-up Generated in your browser CSS, JSON & HEX export

Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.

What Goes With Olive Green

Olive is a muted colour and it belongs with other muted ones — cream, tan and a soft rust or terracotta for the warm accent. Its neighbours in the family are sage green, which is lighter and greyer, and forest green, which is darker and bluer. Military, outdoor, workwear and natural-cosmetic branding use it.

Frequently Asked Questions

What HEX codes make an olive green palette?
Olive green is a dark, yellow-tinged green: build from a deep anchor (#333D1B, #4B5320) through a true olive (#708238, #808000) to light sage tints (#9CA766, #C5D0A0). The muted, slightly brown-green cast is what makes it read as olive rather than grass green. The three sets above are worked examples of that: Classic Olive, Olive & Sage and Muted Olive, five codes each. The deepest value on this page is #333D1B and the palest is #EDEAD0; put one on the other and you get 9.4:1, enough for body text at any size under WCAG AA and AAA.
What is the difference between olive and sage green?
Olive and sage green differ in depth. Olive #708238 is 36% lightness at 40% saturation; sage #9CAF88 is 61% lightness at 20%. They share a hue band around 75°–89°, so the difference is that olive is dark and pigmented while sage is pale and greyed — olive works as a text colour, sage does not.
How do I use these colours in CSS?
Click Copy CSS for a ready-to-paste :root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. If a ready-made set is easier, the Classic Olive row above reads #333D1B through #9AA86A and you can type those five in as the custom properties yourself. The generator instead rolls around #708238, the base olive green this page is anchored to. Copy JSON gives an array and Copy HEX a comma-separated line when a :root block is not what your project wants.
Which olive green shade should I use as a background?
For a page or card background take the lightest step in the set — #EDEAD0 on this page. Black text on #EDEAD0 comes to 17.2:1, well past the 4.5:1 WCAG AA line. For a dark surface use #333D1B instead, the deepest code here, where white text gives 11.5:1. The mid steps are better spent on borders, chart fills and hover states, where nothing has to be read at 14px.

More palettes: Forest Green palette  ·  Sage Green palette  ·  Lime Green palette  ·  all colours

Related color tools

Color Palette Generator

Roll random harmonious palettes, or build one from any base colour.

Color tools

→

Image Color Picker

Pick exact HEX, RGB and HSL colors from any image with an eyedropper.

Color tools

→