RecolorOpen Recolor

A five-color palette

Olive grove: a green, olive and khaki color palette

A fresh green against an olive brown, a dark olive black, khaki and a light aquamarine. Its hex codes are #60a36c, #745a00, #1b260e, #b2b784, #99f2d1. Open it in Recolor (recolor.page) to see it on a real web page, or copy the code below.

Last updated

#60a36cMedium Sea Green
#745a00Dark Olive Green
#1b260eDark Slate Grey
#b2b784Dark Khaki
#99f2d1Aquamarine
Computed with Recolor's own color code (culori, the WCAG 2 contrast ratio), October 8, 2026
HexNearest CSS nameOKLCHBlack text, AAWhite text, AA
#60a36cMedium Sea Green (mediumseagreen)oklch(65.6% 0.107 148.6)6.95:1 passes3.02:1 fails
#745a00Dark Olive Green (darkolivegreen)oklch(48.1% 0.098 89.1)3.21:1 fails6.55:1 passes
#1b260eDark Slate Grey (darkslategrey)oklch(25.1% 0.044 129.4)1.33:1 fails15.79:1 passes
#b2b784Dark Khaki (darkkhaki)oklch(76.3% 0.069 112.6)10.00:1 passes2.10:1 fails
#99f2d1Aquamarine (aquamarine)oklch(89.6% 0.098 168.6)15.98:1 passes1.31:1 fails

Using the palette

In Recolor the order of the colors is meaning: swatch 1 takes the page's heaviest brand color, swatch 2 the next, and the page's greys take a tint of swatch 1 (how that works is in mapping). Reorder the swatches and the page reorders with them. To keep text readable, the table above says whether black or white text reaches the WCAG AA ratio of 4.5:1 on each color; #1b260e is the darkest of the five.

The code below is what Recolor's own Export panel writes for this palette. The Tailwind block is a Tailwind v4 @theme block, and the Coolors link opens the same colors there. To see the palette on your own site first, follow previewing a palette on a real website.

The palette as code

CSS variables

CSS
:root {
  --color-1: #60a36c;
  --color-2: #745a00;
  --color-3: #1b260e;
  --color-4: #b2b784;
  --color-5: #99f2d1;
  --color-primary: var(--color-1);
  --color-secondary: var(--color-2);
  --color-accent: var(--color-3);
}

Tailwind v4 @theme

CSS
@theme {
  --color-1: #60a36c;
  --color-2: #745a00;
  --color-3: #1b260e;
  --color-4: #b2b784;
  --color-5: #99f2d1;
  --color-primary: #60a36c;
  --color-secondary: #745a00;
  --color-accent: #1b260e;
}

SCSS variables

SCSS
$color-1: #60a36c;
$color-2: #745a00;
$color-3: #1b260e;
$color-4: #b2b784;
$color-5: #99f2d1;
$color-primary: $color-1;
$color-secondary: $color-2;
$color-accent: $color-3;

JSON

JSON
{
  "colors": [
    "#60a36c",
    "#745a00",
    "#1b260e",
    "#b2b784",
    "#99f2d1"
  ]
}

Hex list

Text
#60a36c
#745a00
#1b260e
#b2b784
#99f2d1

Coolors link

URL
https://coolors.co/60a36c-745a00-1b260e-b2b784-99f2d1