Jungle color palette
Dense green under a thick canopy. These five shades are pure green with the saturation turned down, from deep shade #1A3C1A to a pale, dusty leaf, #A4C4A4. The muted tone gives it a field-guide or army-surplus feel, calm and practical. Picture it on a safari tour brochure or a camping gear catalog.
Jungle palette in use
The dark background is #1A3C1A, and body text goes in #A4C4A4. #6B9B6B makes the button color, #2E5C2E suits cards, and #4A7C4A borders and icons.
This pair measures 6.45:1, so it works for body text too. The button uses #4A7C4A with white text.
ButtonGood for
- Safari tour website
- Camping gear shop
- Botany course slides
- Survival game UI
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 |
|---|---|---|---|
#1A3C1A | #A4C4A4 | 6.45:1 | AA |
#2E5C2E | #A4C4A4 | 4.09:1 | AA large |
#1A3C1A | #6B9B6B | 3.82:1 | AA large |
Jungle palette as code
CSS variables
:root {
--jungle-1: #1A3C1A;
--jungle-2: #2E5C2E;
--jungle-3: #4A7C4A;
--jungle-4: #6B9B6B;
--jungle-5: #A4C4A4;
}Tailwind v4
@theme {
--color-jungle-1: #1A3C1A;
--color-jungle-2: #2E5C2E;
--color-jungle-3: #4A7C4A;
--color-jungle-4: #6B9B6B;
--color-jungle-5: #A4C4A4;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'jungle': {
100: '#1A3C1A',
200: '#2E5C2E',
300: '#4A7C4A',
400: '#6B9B6B',
500: '#A4C4A4',
},SCSS
$jungle-1: #1A3C1A;
$jungle-2: #2E5C2E;
$jungle-3: #4A7C4A;
$jungle-4: #6B9B6B;
$jungle-5: #A4C4A4;JSON
["#1A3C1A","#2E5C2E","#4A7C4A","#6B9B6B","#A4C4A4"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.