What is the hex code for olive?

The hex code for olive is #808000. The same color is rgb(128, 128, 0), hsl(60, 100%, 25%) and oklch(58.1% 0.127 109.8), and in CSS you can also write the keyword olive directly.

Can you use white text on olive?

White text on olive has a contrast ratio of 4.19: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.00:1 and passes AA for normal text but not AAA. In APCA terms that is Lc −74.2 for white and Lc 35.3 for black.

What is the RGB value of olive?

Olive is rgb(128, 128, 0): red 128, green 128 and blue 0 on the 0 to 255 scale, or 50.2%, 50.2% and 0.0%. As a decimal integer it is 8421376.

Basic HTML and CSS color

Olive #808000

Olive (CSS keyword olive) has the hex code #808000 and the RGB value rgb(128, 128, 0): a medium, moderately saturated olive.

Olive#808000

Olive (#808000) is one of the 16 original HTML colors: half-intensity red and green, which gives a dark yellow that reads as olive green.

Color codes for Olive

Color codes for Olive
CSS keyword	olive
HEX	#808000
RGB	rgb(128, 128, 0)
HSL	hsl(60, 100%, 25%)
HWB	hwb(60 0% 50%)
OKLCH	oklch(58.1% 0.127 109.8)
CMYK (naive, no ICC profile)	cmyk(0%, 0%, 100%, 50%)
Decimal	8,421,376
Hue family	Greens

Contrast and accessibility

On olive, black text has a contrast ratio of 5.00:1 and passes AA for normal text; white text reaches 4.19: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.

Contrast and accessibility
Pair	Ratio	AA	AA large	AAA	AAA large	APCA Lc
Black text on olive	5.00:1	Pass	Pass	Fail	Pass	35.3
White text on olive	4.19:1	Fail	Pass	Fail	Fail	−74.2
Olive text on white	4.19:1	Fail	Pass	Fail	Fail	68.8
Olive text on black	5.00:1	Pass	Pass	Fail	Pass	−32.9

Tints and shades

Each step mixes olive with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, olive, white 25%) in CSS.

Tints (mixed with white)

5%
#86860d
15%
#939326
25%
#a0a040
35%
#acac59
45%
#b9b973
55%
#c6c68c
65%
#d3d3a6
75%
#dfdfbf
85%
#ececd9
95%
#f9f9f2

Shades (mixed with black)

5%
#7a7a00
15%
#6d6d00
25%
#606000
35%
#535300
45%
#464600
55%
#3a3a00
65%
#2d2d00
75%
#202000
85%
#131300
95%
#060600

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, olive's complementary color is #7A6CC0 (close to mediumpurple), its analogous colors are #A17000 and #4F8C40, and its triadic partners are #0087B6 and #B05885. For text on top, black gives the higher contrast.

Color harmonies
Harmony	Rotation	Color
Complementary	+180°	#7a6cc0
Analogous	−30°, +30°	#a17000#4f8c40
Triadic	+120°, +240°	#0087b6#b05885
Split-complementary	+150°, +210°	#4c7ac5#9b60a9

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?

Olive is a warm color: its hue is 60° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.

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

Nearest CSS named colors
Color	HEX	ΔE OK
olivedrab	#6b8e23	4.4
seagreen	#2e8b57	9.5
darkgoldenrod	#b8860b	9.5

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
Color	HEX	ΔE OK
lime-700	#497d00	7.8
olive-500	#7c7c67	9.6
yellow-700	#a65f00	10.0

Code snippets

CSS

.element {
  color: olive;
  background-color: #808000;
  border-color: rgb(128 128 0);
  outline-color: oklch(58.1% 0.127 109.8);
}

Tailwind CSS

<div class="bg-[#808000] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-olive: #808000;
}
/* then use bg-olive, text-olive, border-olive */

SwiftUI

import SwiftUI

extension Color {
  static let olive = Color(red: 0.502, green: 0.502, blue: 0.000)
}

Jetpack Compose

import androidx.compose.ui.graphics.Color

val Olive = Color(0xFF808000)

Flutter

import 'package:flutter/material.dart';

const olive = Color(0xFF808000);

Android XML

<!-- res/values/colors.xml -->
<color name="olive">#808000</color>

Frequently asked questions

What is the hex code for olive?: The hex code for olive is #808000. The same color is rgb(128, 128, 0), hsl(60, 100%, 25%) and oklch(58.1% 0.127 109.8), and in CSS you can also write the keyword olive directly.
Is olive a warm or cool color?: Olive is a warm color: its hue is 60° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
What colors go with olive?: Rotating the hue in OKLCH while keeping lightness and chroma, olive's complementary color is #7A6CC0 (close to mediumpurple), its analogous colors are #A17000 and #4F8C40, and its triadic partners are #0087B6 and #B05885. For text on top, black gives the higher contrast.
Can you use white text on olive?: White text on olive has a contrast ratio of 4.19: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.00:1 and passes AA for normal text but not AAA. In APCA terms that is Lc −74.2 for white and Lc 35.3 for black.
What is the RGB value of olive?: Olive is rgb(128, 128, 0): red 128, green 128 and blue 0 on the 0 to 255 scale, or 50.2%, 50.2% and 0.0%. As a decimal integer it is 8421376.

Last reviewed September 27, 2026 by Arielton Oberek.