A medium olive, black text passes AA
What color is olive?
The CSS named color olive is #808000, or rgb(128 128 0): a medium olive in plain words. Black text on it reaches 5.01:1, passing WCAG AA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | olive |
| Hex | #808000 |
| RGB | rgb(128 128 0) |
| HSL | hsl(60 100% 25%) |
| OKLCH | oklch(58.1% 0.127 109.8) |
| Nearest Tailwind color | lime-700 #497d00, 0.076 away in OKLab |
| White text | 4.20:1: AA fails, AAA fails, large text passes |
| Black text | 5.01:1: AA passes, AAA fails, large text passes |
About olive
A medium olive is the plain description of olive: OKLCH lightness 58.1%, chroma 0.127, hue 109.8 degrees. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Its HSL lightness, 25%, says little about how light olive looks; OKLCH, made to match the eye, measures 58.1%, 33 points away. The closest CSS named color is olivedrab (#6b8e23), 0.044 away in OKLab: near, and still a visible step from it side by side.
Black text on olive reaches 5.01:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 4.20:1. Its neighbors in the hue-sorted list of names are darkkhaki and greenyellow.
The closest Tailwind 4.3.3 color is lime-700, 0.076 away in OKLab, so bg-lime-700 comes near; bg-[#808000] gives the color itself.
Tints and shades
- #e8e9da
- #d2d4b5
- #bdbf90
- #a8aa6a
- #949542
- #808000
- #636300
- #484800
- #2e2e00
- #161600
- #030300
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #808000
- #e2e6ac
- #272807
- #bfbc8b
- #505334
Recolor's generator, with olive locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #e2e6ac, #272807, #bfbc8b, #505334. Open it in Recolor.
Using olive
As a text color, olive on a black page gives the same 5.01:1.
.notice {
background-color: olive; /* #808000 */
color: black; /* 5.01:1 */
}Common questions
Does white text pass WCAG AA on olive?
No. White text measures 4.20:1 on olive, under AA's 4.5:1; black text measures 5.01:1 and passes.
Can olive be written in OKLCH?
Yes: oklch(58.1% 0.127 109.8), computed from #808000. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to olive?
Yes: olivedrab (#6b8e23) is the nearest, 0.044 away in OKLab, then seagreen at 0.095.