Deep Forest color palette
Old-growth woods with almost no light getting through. The darkest shade, #0F2B0F, is nearly black, and the greens rise to a clear leaf color, #6DB86D. These are true greens with no blue or yellow lean, which makes them look natural and classic. With no pale tint, it's best used dark. Fishing outfitters and national park guides are good homes for it.
Deep Forest palette in use
Make #0F2B0F the background and #6DB86D the color for headings and buttons, with off-white body text. #1A4A1A and #2D6A2D suit cards and panels, and #4A8B4A borders and hover states.
This pair measures 6.35:1, so it works for body text too. The button uses #4A8B4A with black text.
ButtonGood for
- National park guide
- Fishing outfitter website
- Golf club branding
- Adventure game map
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 |
|---|---|---|---|
#0F2B0F | #6DB86D | 6.35:1 | AA |
#1A4A1A | #6DB86D | 4.28:1 | AA large |
#0F2B0F | #4A8B4A | 3.70:1 | AA large |
Deep Forest palette as code
CSS variables
:root {
--deep-forest-1: #0F2B0F;
--deep-forest-2: #1A4A1A;
--deep-forest-3: #2D6A2D;
--deep-forest-4: #4A8B4A;
--deep-forest-5: #6DB86D;
}Tailwind v4
@theme {
--color-deep-forest-1: #0F2B0F;
--color-deep-forest-2: #1A4A1A;
--color-deep-forest-3: #2D6A2D;
--color-deep-forest-4: #4A8B4A;
--color-deep-forest-5: #6DB86D;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'deep-forest': {
100: '#0F2B0F',
200: '#1A4A1A',
300: '#2D6A2D',
400: '#4A8B4A',
500: '#6DB86D',
},SCSS
$deep-forest-1: #0F2B0F;
$deep-forest-2: #1A4A1A;
$deep-forest-3: #2D6A2D;
$deep-forest-4: #4A8B4A;
$deep-forest-5: #6DB86D;JSON
["#0F2B0F","#1A4A1A","#2D6A2D","#4A8B4A","#6DB86D"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.