olive — #808000
#808000
rgb(128, 128, 0) · hsl(60, 100%, 25%) · CSS keyword olive
Can you put text on it?
| Contrast | Body text | Large text | |
|---|---|---|---|
| olive on white | 4.2:1 | — | AA |
| olive on black | 5.01:1 | AA | AA |
As a background, olive takes black text: 5.01:1 against 4.2:1 the other way. A colour picker will give you the hex and stop there, which is why so many palettes look right and fail an accessibility audit.
Where the name comes from
The colour of the unripe fruit. In CSS it is a dark yellow rather than the green most people picture.
Using it
color: olive;
color: #808000;
color: rgb(128 128 0);
All three are the same colour. The keyword is one of the 141 CSS named colours — a list settled in CSS 2.1 and added to exactly once since, when rebeccapurple was standardised in 2014.
Colours close to olive
- olivedrab — #6B8E23
- darkgoldenrod — #B8860B
- darkolivegreen — #556B2F
- dimgray — #696969
- sienna — #A0522D
- gray — #808080
Frequently asked questions
What is the hex code for olive?
The hex code for olive is #808000 — RGB 128, 128, 0.
Can I use olive for text?
Only for large text. olive reaches 4.2:1 against white — enough for the 3:1 of headings at 24px or 18.5px bold, short of the 4.5:1 body text needs.
Should text on olive be black or white?
Black — 5.01:1 against 4.2:1 the other way.
Other named colours
- olivedrab — #6B8E23
- orange — #FFA500
- orangered — #FF4500
- orchid — #DA70D6
- palegoldenrod — #EEE8AA
- palegreen — #98FB98
- paleturquoise — #AFEEEE
- palevioletred — #DB7093
- papayawhip — #FFEFD5
- peachpuff — #FFDAB9
- peru — #CD853F
- pink — #FFC0CB
#808000 in full — tints, shades and harmonies · All named colours · Colour reference