Colors EncyclopediaNamed color
Olive Green
Olive Green color #708238: RGB 112, 130, 56 and HSL 75°, 40%, 36%. Explore its warm green profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Olive Green
Open a professional color tool with #708238 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Olive Green and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-olive-green: #708238;
.bg-olive-green { background-color: #708238; }
.text-olive-green { color: #708238; }Color history, meaning and use · Editorially reviewed
About Olive Green Color
Olive green borrows its identity from the subdued yellow-green and brown-green range associated with olives and foliage. Like many natural-language color terms, it covers a family rather than one coordinate. Historical military, textile, artists’ material, and decorative uses may also refer to olive drab, olive gray, or proprietary mixtures that are related but not interchangeable.
The #708238 reference is a restrained yellow-green suited to maps, outdoor themes, heritage palettes, and warm neutral systems. Its muted appearance can disguise weak contrast, so small labels and controls should be tested rather than judged by the name. For physical production, specify an agreed standard and sample instead of translating this RGB value informally.
This HEX is a digital interpretation, not a military color standard, botanical measurement, camouflage specification, paint formula, or guaranteed material match.
WCAG Accessibility
Contrast checks for Olive Green against black and white text.
Black text4.94:1AA Pass
White text4.25:1AA Fail
Downloadable color reference infographic
Olive Green Color Reference Infographic
Save a high-resolution infographic of Olive Green, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.197
Black text4.94:1AA Pass
White text4.25:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#708238",
"rgb": [
112,
130,
56
],
"hsl": [
75,
40,
36
],
"cmyk": [
14,
0,
57,
49
],
"luminance": 0.197,
"contrast": {
"black": 4.94,
"white": 4.25
}
}WCAG
{
"AA": [
"#000000"
],
"AAA": []
}Harmonies
{
"complementary": "#493781",
"analogous": [
"#816E37",
"#498137"
],
"triadic": [
"#376E81",
"#81376E"
],
"tetradic": [
"#37816E",
"#493781",
"#813749"
],
"splitComplementary": [
"#374981",
"#6E3781"
],
"monochromatic": [
"#A1B95B",
"#708238",
"#37401C"
]
}Variants
{
"light": "#A1B95B",
"dark": "#37401C",
"saturated": "#789523",
"desaturated": "#646C4B",
"pastel": "#A8B483",
"neon": "#A8E000"
}Pairings
{
"best": [
"#000000",
"#493781",
"#816E37",
"#498137"
],
"avoid": [
"#646C4B",
"#A1B95B"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#A1B95B",
"#646C4B"
]
}Knowledge graph
{
"nearestColors": [
"olive-drab",
"olive-leaf",
"fern-frond",
"raw-umber",
"fern-green"
],
"generatedPalettes": [
"olive-green"
],
"generatedComparisons": [
"olive-drab-vs-olive-green",
"olive-green-vs-olive-leaf",
"sage-green-vs-olive-green"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/olive-green",
"/wcag/olive-green",
"/css/colors/olive-green",
"/hex/708238",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/olive-green"
],
"related": [
"/colors/olive-drab",
"/colors/olive-leaf",
"/colors/fern-frond",
"/colors/raw-umber",
"/colors/fern-green",
"/compare/olive-drab-vs-olive-green",
"/compare/olive-green-vs-olive-leaf",
"/compare/sage-green-vs-olive-green",
"/harmonies/olive-green",
"/wcag/olive-green",
"/css/colors/olive-green",
"/hex/708238",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "olive-green",
"name": "Olive Green",
"hex": "#708238",
"family": "green",
"temperature": "warm",
"tone": [
"earth-tone",
"muted"
],
"uses": [
"heritage palettes",
"outdoor brands",
"natural product design"
],
"psychology": {
"associations": [
"earthiness",
"durability",
"natural restraint"
],
"contexts": [
"outdoor apparel",
"heritage branding",
"interior accents"
],
"avoidIn": [
"very clean medical UI systems"
]
},
"aliases": [
"olive"
],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"tags": [
"green",
"warm",
"earth-tone",
"muted",
"heritage-palettes",
"outdoor-brands",
"natural-product-design",
"earthiness",
"durability",
"natural-restraint"
],
"popularity": 73,
"rgb": [
112,
130,
56
],
"hsl": [
75,
40,
36
],
"cmyk": [
14,
0,
57,
49
],
"luminance": 0.197,
"contrast": {
"black": 4.94,
"white": 4.25
},
"harmonies": {
"complementary": "#493781",
"analogous": [
"#816E37",
"#498137"
],
"triadic": [
"#376E81",
"#81376E"
],
"tetradic": [
"#37816E",
"#493781",
"#813749"
],
"splitComplementary": [
"#374981",
"#6E3781"
],
"monochromatic": [
"#A1B95B",
"#708238",
"#37401C"
]
},
"variants": {
"light": "#A1B95B",
"dark": "#37401C",
"saturated": "#789523",
"desaturated": "#646C4B",
"pastel": "#A8B483",
"neon": "#A8E000"
},
"wcag": {
"AA": [
"#000000"
],
"AAA": []
},
"css": {
"variable": "--color-olive-green: #708238;",
"utility": ".bg-olive-green { background-color: #708238; }",
"textUtility": ".text-olive-green { color: #708238; }"
},
"nearestColors": [
"olive-drab",
"olive-leaf",
"fern-frond",
"raw-umber",
"fern-green"
],
"generatedPalettes": [
"olive-green"
],
"generatedComparisons": [
"olive-drab-vs-olive-green",
"olive-green-vs-olive-leaf",
"sage-green-vs-olive-green"
],
"relatedFamilies": [
"/colors/by-family/green",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"relatedTools": [
"/harmonies/olive-green",
"/wcag/olive-green",
"/css/colors/olive-green",
"/hex/708238",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/green",
"/colors/by-temperature/warm",
"/colors/by-tone/earth-tone",
"/colors/by-tone/muted"
],
"narrower": [
"/palettes/olive-green"
],
"related": [
"/colors/olive-drab",
"/colors/olive-leaf",
"/colors/fern-frond",
"/colors/raw-umber",
"/colors/fern-green",
"/compare/olive-drab-vs-olive-green",
"/compare/olive-green-vs-olive-leaf",
"/compare/sage-green-vs-olive-green",
"/harmonies/olive-green",
"/wcag/olive-green",
"/css/colors/olive-green",
"/hex/708238",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#493781",
"#816E37",
"#498137"
],
"avoid": [
"#646C4B",
"#A1B95B"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#A1B95B",
"#646C4B"
]
}
}