HueWiz / Colors / Olivedrab
#6B8E23

Olivedrab

Olivedrab is a rich, strongly saturated, dark cool green (#6B8E23).

Build palettes with Olivedrab →

Using Olivedrab in your designs

At hue 80° with 60% saturation, olivedrab lands firmly in the green family — a cool color through and through. Colors in this range are commonly associated with growth, nature and reassurance, which makes olivedrab a natural fit for success states, environmental themes and finance products.

Olivedrab is bright enough that it pairs better with dark text than white: black type on olivedrab hits 5.52:1 — past the WCAG AA threshold — while white manages only 3.81:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.

For pairings, the complement of olivedrab sits at 260° — #47248F, close to rebeccapurple — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same cool temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for olivedrab in the palettes below, with copy-ready codes.

Olivedrab color palettes

Every palette below is computed from olivedrab's position on the color wheel (hue 80°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Olivedrab

Tints mix olivedrab toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how olivedrab performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

PairingRatioNormal textLarge text
White text on Olivedrab3.81:1FailAA
Black text on Olivedrab5.52:1AAAAA
Protanopia#7A7A3D
Deuteranopia#787643
Tritanopia#6D5156

Olivedrab in code

Copy-ready snippets. In CSS you can also use the keyword olivedrab directly.

:root {
  --olivedrab: #6B8E23;
  --olivedrab-rgb: 107, 142, 35;
  --olivedrab-tint: #AEC186;
  --olivedrab-shade: #3B4E13;
}

.btn-olivedrab {
  background: var(--olivedrab);
  color: #000000;
}
// tailwind.config.js
colors: {
  'olivedrab': {
    DEFAULT: '#6B8E23',
    light: '#AEC186',
    dark: '#3B4E13',
  },
}

Colors similar to Olivedrab

The closest CSS named colors by perceptual (Lab) distance.

← PreviousoliveNext →orange
Copied