Olive Color Hex Code, RGB & HSL Values

What is the meaning of the Olive color?

Olive is a dark, muted yellowish-green color resembling green olives. It represents peace, military utility, and organic agriculture, giving a grounded, mature look to earthy designs.

How to use the Olive color hex code in HTML & CSS?

To style elements with Olive on a website, use the hex code #808000 in your HTML/CSS. Adding background-color: #808000; will render the color. In Tailwind CSS, you can apply this shade dynamically using classes like bg-[#808000] or configuring it as a color variable in your configuration file.

What are the RGB and HSL codes of Olive?

In the digital sRGB spectrum, the Olive color code is mapped to RGB values of Red: 128, Green: 128, and Blue: 0. In the HSL system, it registers at hue angle 60°, saturation 100%, and lightness index 25%. It represents a dark, rich color characterized by a highly vivid, intense, and brilliant shade.

CMYK print profiles for Olive color

To reproduce the named shade Olive in print systems, the CMYK ink configuration requires 0% Cyan, 0% Magenta, 100% Yellow, and 50% black. Yellow shades are excellent warning triggers and call-to-actions, radiating optimism, energy, and caution.

Red Channel 128

Green Channel 128

Blue Channel 0

Luminance 0.200

⇄ Olive Color Space Conversions

Click to copy format

HEX Color Code #808000

RGB (Red Green Blue) rgb(128, 128, 0)

HSL (Hue Sat Light) hsl(60°, 100%, 25%)

CMYK (Commercial Print) cmyk(0%, 0%, 100%, 50%)

HSV / HSB Values hsv(60°, 100%, 50%)

Decimal Color Code 8421376

CSS Custom Variable --color-hex: #808000;

Tailwind CSS Utility bg-[#808000]

CSS Named Color olive

◎ Contrast & Accessibility (WCAG 2.1) Check

White Text on Background

White text readability test with #808000

Small body copy preview

Black Text on Background

Black text readability test with #808000

Small body copy preview

◈ Complementary & Analogous Harmonies

Computed dynamically

▤ Shades & Tints Generator Matrix

Copy shade hex values instantly

Darker Shades (Adding Black)

Lighter Tints (Adding White)

{ } CSS Custom Properties (Variables)

Copy CSS Styles

/* CSS Custom Properties for Olive */
--color-hex: #808000;
--color-rgb: rgb(128, 128, 0);
--color-hsl: hsl(60deg, 100%, 25%);
--color-name: olive;

Aa Known Color Aliases

✦ Olive Color Meaning

Representing the green color family, Olive carries the intrinsic characteristics of this organic hue. This color group is universally associated with nature, health, and renewal. As the color most prevalent in the natural world, the human eye has evolved to find it restful and calming. In psychology, green signals safety, permission, and go-ahead — from traffic lights to medical symbols. It represents growth, both financial and biological, making it the dominant color in finance and environmental sectors. Dark greens convey prestige and wealth, while bright greens communicate vitality and eco-consciousness. Green rooms in theaters exist specifically because the color's calming effect helps performers prepare before going on stage.

Emotions & Associations

SafetyCalmNatureProsperity

Industries

HealthcareEnvironmentFood & Organic