Savanna color palette
Dry grass under a hot sky, and the shade under an acacia tree. #C8A96E is golden grass, #A08040 ochre, and #785820, #503810 and #302008 are olive-tinged browns that get darker and richer. The set leans dark, which makes it handsome as a background with gold type. Safari lodges and outdoor outfitters are its obvious audience.
Savanna palette in use
Go dark with #302008 or #503810 behind #C8A96E headings and text. #A08040 suits buttons, and #785820 works for cards and borders.
This pair measures 7.00:1, so it works for body text too. The button uses #A08040 with black text.
ButtonGood for
- Safari lodge website
- Outdoor outfitter catalog
- Wildlife charity appeal
- Leather goods tag
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 |
|---|---|---|---|
#302008 | #C8A96E | 7.00:1 | AAA |
#503810 | #C8A96E | 4.88:1 | AA |
#302008 | #A08040 | 4.23:1 | AA large |
Savanna palette as code
CSS variables
:root {
--savanna-1: #C8A96E;
--savanna-2: #A08040;
--savanna-3: #785820;
--savanna-4: #503810;
--savanna-5: #302008;
}Tailwind v4
@theme {
--color-savanna-1: #C8A96E;
--color-savanna-2: #A08040;
--color-savanna-3: #785820;
--color-savanna-4: #503810;
--color-savanna-5: #302008;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'savanna': {
100: '#C8A96E',
200: '#A08040',
300: '#785820',
400: '#503810',
500: '#302008',
},SCSS
$savanna-1: #C8A96E;
$savanna-2: #A08040;
$savanna-3: #785820;
$savanna-4: #503810;
$savanna-5: #302008;JSON
["#C8A96E","#A08040","#785820","#503810","#302008"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.