Color meaning

Olive

Introducing Olive (#6B6B23), a muted, earthy green shade. Its low-key warmth gives storefronts a grounded, artisanal feel, while its restraint makes it a dependable base for natural, wellness, and slow-fashion catalogs where color should feel harvested rather than manufactured.

#6B6B23HSL 60, 51%, 28%

Olive code conversions

HEX
#6B6B23
RGB
rgb(107, 107, 35)
HSL
hsl(60, 51%, 28%)
HSB
hsb(60, 67%, 42%)
CMYK
cmyk(0%, 0%, 67%, 58%)

Olive color harmonies

Analogous

Neighbors on the color wheel: a calm, low-contrast set that reads as one family.

Complementary

The hue directly opposite: maximum contrast for an accent that pops.

Split Complementary

The complement's two neighbors: strong contrast with less tension than a straight complement.

Triadic

Three hues evenly spaced: balanced and vivid without a single dominant color.

Tetradic

Two complementary pairs: a rich four-color scheme that needs one color to lead.

Square

Four hues evenly spaced: bold and balanced, best with one anchor and three accents.

Olive contrast

Your catchy large text

Small body copy sitting on Olive.

5.6:1White textAA passAAA fail

Your catchy large text

Small body copy sitting on Olive.

3.37:1Black textAA failAAA fail

Olive color variations

Shades

Mixed toward black: deeper steps for backgrounds and hover states.

Tints

Mixed toward white: softer steps for surfaces and disabled states.

Tones

Mixed toward gray: muted, sophisticated steps that lower the intensity.

Hues

Rotated around the wheel: related hues at the same lightness and saturation.

Related green colors

Forest GreenSage GreenEmerald

Olive: frequently asked

What color is Olive?

Olive (#6B6B23) is a dark yellow-green with a dusty, low-saturation cast. In e-commerce interfaces it reads as calm and organic, sitting between a khaki neutral and a true forest green.

What is the meaning of Olive?

Olive signals nature, durability, and understated craft. Brands reach for it when they want customers to feel calm and grounded while browsing pantry goods, outdoor gear, or heritage apparel.

How do I use Olive (#6B6B23) in e-commerce design?

Use Olive for category headers, product tags, and secondary buttons, and pair it with cream or off-white to keep text legible. Reserve it for accents and framing rather than large fills, where its dull yellow undertone can look muddy.

Using Olive color codes

Copy Olive (#6B6B23) in HEX, RGB, HSL, HSB, and CMYK below to match it across web store, app, and packaging.

Colors are just the start

See these colors at work in real, looping storefront captures. The whole library is free to browse.

Browse the librarySee pricing

Free to browse · Pro unlocks the MCP