Olive Grove color palette
Olive trees in the Greek sun, from dark olive #6B6914 through olive drab and chartreuse to a pale, lemony green, #E8E8A0. Every shade carries a strong yellow cast, so it feels sunny and Mediterranean. The tone is unusual enough to stand out on a store shelf. Olive oil brands and Greek restaurants can use it on labels and menus.
Olive Grove palette in use
Set text and headings in #6B6914 over an #E8E8A0 background. #8B8914 is the button color, and #C8C860 and #AAAA2A work for cards, borders and illustrations.
This pair measures 4.50:1, so it works for body text too. The button uses #AAAA2A with black text.
ButtonGood for
- Olive oil label
- Greek restaurant menu
- Vineyard website
- Deli packaging
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#6B6914 | #E8E8A0 | 4.50:1 | AA |
#6B6914 | #C8C860 | 3.25:1 | AA large |
Olive Grove palette as code
CSS variables
:root {
--olive-grove-1: #6B6914;
--olive-grove-2: #8B8914;
--olive-grove-3: #AAAA2A;
--olive-grove-4: #C8C860;
--olive-grove-5: #E8E8A0;
}Tailwind v4
@theme {
--color-olive-grove-1: #6B6914;
--color-olive-grove-2: #8B8914;
--color-olive-grove-3: #AAAA2A;
--color-olive-grove-4: #C8C860;
--color-olive-grove-5: #E8E8A0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'olive-grove': {
100: '#6B6914',
200: '#8B8914',
300: '#AAAA2A',
400: '#C8C860',
500: '#E8E8A0',
},SCSS
$olive-grove-1: #6B6914;
$olive-grove-2: #8B8914;
$olive-grove-3: #AAAA2A;
$olive-grove-4: #C8C860;
$olive-grove-5: #E8E8A0;JSON
["#6B6914","#8B8914","#AAAA2A","#C8C860","#E8E8A0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.