CSS named color
OliveDrab #6B8E23
OliveDrab (CSS keyword olivedrab) has the hex code #6B8E23 and the RGB value rgb(107, 142, 35): a medium, moderately saturated yellow-green.
Named after the olive drab of military uniforms and equipment, though the CSS value (#6b8e23) is a brighter yellow-green than most military specifications.
Color codes for OliveDrab
| CSS keyword | olivedrab |
|---|---|
| HEX | #6B8E23 |
| RGB | rgb(107, 142, 35) |
| HSL | hsl(80, 60%, 35%) |
| HWB | hwb(80 14% 44%) |
| OKLCH | oklch(59.9% 0.137 126.3) |
| CMYK (naive, no ICC profile) | cmyk(25%, 0%, 75%, 44%) |
| Decimal | 7,048,739 |
| Hue family | Greens |
Contrast and accessibility
On olivedrab, black text has a contrast ratio of 5.51:1 and passes AA for normal text; white text reaches 3.80:1.
WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.
| Pair | Ratio | AA | AA large | AAA | AAA large | APCA Lc |
|---|---|---|---|---|---|---|
| Black text on olivedrab | 5.51:1 | Pass | Pass | Fail | Pass | 38.7 |
| White text on olivedrab | 3.80:1 | Fail | Pass | Fail | Fail | −70.9 |
| Olivedrab text on white | 3.80:1 | Fail | Pass | Fail | Fail | 65.4 |
| Olivedrab text on black | 5.51:1 | Pass | Pass | Fail | Pass | −36.2 |
Tints and shades
Each step mixes olivedrab with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, olivedrab, white 25%) in CSS.
Tints (mixed with white)
- 5%
#72942e - 15%
#819f44 - 25%
#90aa5a - 35%
#9fb670 - 45%
#aec186 - 55%
#bccc9c - 65%
#cbd7b2 - 75%
#dae3c8 - 85%
#e9eede - 95%
#f8f9f4
Shades (mixed with black)
- 5%
#668721 - 15%
#5b791e - 25%
#506b1a - 35%
#465c17 - 45%
#3b4e13 - 55%
#304010 - 65%
#25320c - 75%
#1b2409 - 85%
#101505 - 95%
#050702
Color harmonies
Rotating the hue in OKLCH while keeping lightness and chroma, olivedrab's complementary color is #9568C0 (close to mediumpurple), its analogous colors are #987E00 and #1A985D, and its triadic partners are #2886CD and #C25873. For text on top, black gives the higher contrast.
| Harmony | Rotation | Color |
|---|---|---|
| Complementary | +180° | #9568c0 |
| Analogous | −30°, +30° | #987e00#1a985d |
| Triadic | +120°, +240° | #2886cd#c25873 |
| Split-complementary | +150°, +210° | #6b76d1#b25d9f |
Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.
Warm or cool?
OliveDrab sits on the boundary: its hue of 80° on the HSL wheel is a yellow-green, which reads warm next to blues and cool next to reds and oranges.
Nearest named and Tailwind colors
Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.
Nearest CSS named colors
| Color | HEX | ΔE OK |
|---|---|---|
| olive | #808000 | 4.4 |
| forestgreen | #228b22 | 6.8 |
| seagreen | #2e8b57 | 7.3 |
Nearest Tailwind v4 colors
| Color | HEX | ΔE OK |
|---|---|---|
| lime-700 | #497d00 | 7.2 |
| lime-600 | #5ea500 | 8.1 |
| emerald-600 | #009966 | 9.0 |
Code snippets
.element {
color: olivedrab;
background-color: #6b8e23;
border-color: rgb(107 142 35);
outline-color: oklch(59.9% 0.137 126.3);
}<div class="bg-[#6b8e23] text-black">...</div>
/* or register it once in your CSS (Tailwind v4) */
@theme {
--color-olivedrab: #6b8e23;
}
/* then use bg-olivedrab, text-olivedrab, border-olivedrab */import SwiftUI
extension Color {
static let olivedrab = Color(red: 0.420, green: 0.557, blue: 0.137)
}import androidx.compose.ui.graphics.Color
val Olivedrab = Color(0xFF6B8E23)import 'package:flutter/material.dart';
const olivedrab = Color(0xFF6B8E23);<!-- res/values/colors.xml -->
<color name="olivedrab">#6B8E23</color>Frequently asked questions
- What is the hex code for olivedrab?
- The hex code for olivedrab is #6B8E23. The same color is rgb(107, 142, 35), hsl(80, 60%, 35%) and oklch(59.9% 0.137 126.3), and in CSS you can also write the keyword olivedrab directly.
- Is olivedrab a warm or cool color?
- OliveDrab sits on the boundary: its hue of 80° on the HSL wheel is a yellow-green, which reads warm next to blues and cool next to reds and oranges.
- What colors go with olivedrab?
- Rotating the hue in OKLCH while keeping lightness and chroma, olivedrab's complementary color is #9568C0 (close to mediumpurple), its analogous colors are #987E00 and #1A985D, and its triadic partners are #2886CD and #C25873. For text on top, black gives the higher contrast.
- Can you use white text on olivedrab?
- White text on olivedrab has a contrast ratio of 3.80:1, which passes AA only for large text (24 px, or 18.66 px bold, and up) under WCAG 2.2. Black text reaches 5.51:1 and passes AA for normal text but not AAA. In APCA terms that is Lc −70.9 for white and Lc 38.7 for black.
- What is the RGB value of olivedrab?
- OliveDrab is rgb(107, 142, 35): red 107, green 142 and blue 35 on the 0 to 255 scale, or 42.0%, 55.7% and 13.7%. As a decimal integer it is 7048739.
Last reviewed by Arielton Oberek.