Color Directory
Olive
A muted yellow-green that reads as earthy rather than fresh.
#808000
- HEX
- #808000
- RGB
- rgb(128, 128, 0)
- HSL
- hsl(60, 100%, 25%)
Check Olive
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #808000 in the sRGB colour space.
About this entry
What it is
A muted yellow-green that reads as earthy rather than fresh.
Military and utility styling, natural palettes and matte finishes.
Copy & use
How to copy and use olive
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Military and utility styling, natural palettes and matte finishes.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from olive
Each step is mixed toward white or black from #808000 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#CCCC99
rgb(204, 204, 153)
Lighter 30%
#A6A64D
rgb(166, 166, 77)
- Base
Base
#808000
rgb(128, 128, 0)
Darker 30%
#5A5A00
rgb(90, 90, 0)
Darker 60%
#333300
rgb(51, 51, 0)
Name & pairing
Where olive comes from
Named for the unripe fruit. This is the CSS keyword value, a pure yellow at half brightness, which makes it darker and more utilitarian than most colours sold as olive.
What to put beside it
Natural with terracotta and sand, and durable in interfaces because it reads as a colour without ever being bright. Works as a muted success state where green would be too cheerful.
Common questions
Using olive
What is olive?
A muted yellow-green that reads as earthy rather than fresh. Military and utility styling, natural palettes and matte finishes.
What are the colour values for Olive?
Olive is HEX #808000, RGB rgb(128, 128, 0), HSL hsl(60, 100%, 25%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will olive work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise olive after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing