12 Shades of Olive with Hex Codes

Named Olive Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

OliveColor Chart: Hex, RGB, HSL & CMYK

Every olive above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Olive Scale from Light to Dark

A 12-step lightness scale built from the core olive hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate olive design tokens.

What Olive Communicates

Olive is the green that does not look like a "success" state. Dropping a yellow-green toward 50% lightness and low saturation produces something that feels natural, worn, and military rather than digital — which is why it anchors outdoor, workwear, and heritage palettes where bright green would look wrong.

Where olive works well

• Outdoor, workwear, and military-adjacent brands
• Earth-tone palettes with terracotta, sand, and brown
• Backgrounds needing a green that will not be read as a status color
• Vintage and print-inspired layouts

Colors that pair with olive

Copy the Olive Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --olive-dark-olive: #3C341F;
  --olive-army-green: #4B5320;
  --olive-fatigue-green: #5B6238;
  --olive-darkolivegreen: #556B2F;
  --olive-olive: #808000;
  --olive-khaki-green: #728639;
  --olive-olivedrab: #6B8E23;
  --olive-moss-green: #8A9A5B;
  --olive-artichoke: #8F9779;
  --olive-sage: #9CAF88;
  --olive-darkkhaki: #BDB76B;
  --olive-yellowgreen: #9ACD32;
}

Olive Color Questions