Green family
Olive Green color
A deep, moderate green leaning yellow. The reference olive green is #677A04, as defined by the xkcd Color Survey.
| HEX | #677A04 | |
|---|---|---|
| RGB | rgb(103, 122, 4) | |
| HSL | hsl(70, 94%, 25%) | |
| HSV | hsv(70, 97%, 48%) | |
| OKLCH | oklch(54.5% 0.128 120.0) | |
| CMYK* | 16, 0, 97, 52 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is olive green?
Olive green is the dull yellow-green of unripe olives. CSS has olive, #808000, which is half-strength red and green; the xkcd survey olive green is darker and greener. It is a classic military and utility colour.
Olive Green hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of olive green in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Olive Green | #677A04 | xkcd Color Survey | Reference shown on this page |
| Olive | #808000 | CSS named color | Close · 83% similar |
| Olive | #6E750E | xkcd Color Survey | Very close · 93% similar |
| Olive | #808010 | Color Names (meodai) | Close · 83% similar |
Olive Green vs Sage Green
#677A04
#88B378
Sage green is lighter and grayer; olive green is darker and more yellow. In numbers: the two are 27% similar (OKLab distance 0.182). See Sage Green for its own codes.
Colors similar to olive green
The closest named colors to #677A04 across all three sources, with their similarity in OKLab.
Tints and shades of olive green
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with olive green
Classic color-wheel combinations built on #677A04, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Olive Green with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a olive green background, white text is the better choice.
Use olive green in CSS
.olive-green {
color: #677A04;
/* or */ color: rgb(103 122 4);
/* or */ color: hsl(70 94% 25%);
/* or */ color: oklch(54.5% 0.128 120.0);
}