CSS Color: Olive
Named CSS color Olive — #808000 in HEX, rgb(128, 128, 0) in RGB, hsl(60, 100%, 25%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Olive | color: Olive; |
| HEX | #808000 | color: #808000; |
| RGB | rgb(128, 128, 0) | color: rgb(128, 128, 0); |
| HSL | hsl(60, 100%, 25%) | color: hsl(60, 100%, 25%); |
About Olive
Olive is a dark, earthy yellow-green that combines equal parts red (128) and green (128) with no blue. At hex `#808000`, it sits at 60 degrees hue (same as Yellow) but with only 25% lightness, creating a muted, natural tone reminiscent of olive tree foliage.
In web design, Olive adds an organic, grounded feel to designs. It works well for military-themed interfaces, nature and gardening websites, organic food brands, and vintage design aesthetics. Its muted character makes it a versatile neutral-like accent.
For accessibility, Olive against white achieves approximately 4.2:1 contrast, which passes WCAG AA for large text. Against very light backgrounds, it can work for headings and emphasis text. Against dark backgrounds, it provides good readability with a warm, natural feel.
Olive pairs well with cream, tan, rust, forest green, and warm grays. It creates sophisticated, earth-toned palettes popular in artisan and craft branding. In Tailwind CSS, `yellow-800` or `lime-800` are approximate matches.
FAQ
What is the hex code for Olive?
The CSS named color Olive has the hex code #808000. You can use it in CSS as color: #808000; or simply color: Olive;.
What is Olive in RGB?
In RGB notation, Olive is rgb(128, 128, 0). Use it in CSS as color: rgb(128, 128, 0);.
What is Olive in HSL?
In HSL notation, Olive is hsl(60, 100%, 25%). Use it in CSS as color: hsl(60, 100%, 25%);.
What color category is Olive?
Olive belongs to the Green color family in the CSS named colors specification.
Can I use the name "Olive" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Olive; or background-color: Olive; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert Olive to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →