About Olive
Olive (olive) is a dark, vivid yellow with the hex code #808000, or rgb(128, 128, 0). In HSL it sits at a hue of 60°, 100% saturation and 25% lightness. It is one of the 148 named colors every browser understands, so you can write color: olive; instead of the hex value.
Using Olive for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Olive text on white | 4.20 : 1 | AA large text only |
| Olive text on black | 5.01 : 1 | AA |
On a olive background, use black text (5.01 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: olive; /* or #808000 */
background-color: #808000;
border: 1px solid rgb(128 128 0 / 50%);
}Similar named colors
Olive Drab (#6b8e23), Dark Goldenrod (#b8860b), Saddle Brown (#8b4513), Dark Olive Green (#556b2f), Sienna (#a0522d), Chocolate (#d2691e).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for olive?
#808000 — that is rgb(128, 128, 0) and hsl(60, 100%, 25%). In CSS you can also just write olive.
Is olive text readable on white?
Its contrast ratio on white is 4.20 : 1, which passes only for large text (WCAG AA large).
What colors go well with olive?
Its complementary color is #000080; analogous colors #804000 and #408000 sit next to it on the color wheel.