Forest Green and Gold color palette
goldenrod · 0.025
Gold #D4AF37 carries the warm metallic glow of antique frames and wedding bands, and that single trait does most of the work in this pairing. Set against Forest Green #2C5F2D, a deep cool green pulled from pine needles and shaded woodland, the gold reads as light catching a dark surface rather than a flat second color.
The two sit 53 degrees apart on the color wheel, so they feel related rather than clashing. measures 3.59 to 1, which is enough separation for gold lettering on a green background at larger sizes, but not for small body text.
For weddings, this is the classic holiday and estate look: deep green linens, gold flatware, ivory florals. In interiors, think dark green walls with brass hardware and picture lights. For branding, it suits heritage products, law firms, whiskey, and small luxury goods. A muted olive (#828735) sits between them and works well for borders or aged accents.
See Forest Green and Gold in use
better
Forest Green Tailwind scale (50-900)
Gold Tailwind scale (50-900)
Forest Green to Gold blend
A continuous interpolation from Forest Green to Gold, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Forest Green and Gold blend best in OKLab
The same two colors blended three ways. This site uses OKLab, which keeps the blend smooth and evenly lit. The other two are shown so you can see what to avoid: sRGB darkens and muddies the middle, and HSL detours through colors that are not in your palette.
Accessibility
Do not place Forest Green text on Gold (or the reverse) for body copy. For readable text, pair a dark scale step such as forest-green-800 or gold-900 with a light one like gold-50.
Contrast pairing grid
Rows are Forest Green steps, columns are Gold steps. Each mark is a Forest Green step shown on a Gold step: a check means it clears WCAG AA for text (4.5:1). If you can read the mark, the pairing is legible.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 400 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 500 | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 600 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
| 700 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
| 800 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| 900 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
✓ passes AA ✗ fails AA
Copy for Tailwind
Tailwind v4 — @theme (paste into your CSS)
@theme {
--color-forest-green-50: #F2F5F1;
--color-forest-green-100: #E4EBE4;
--color-forest-green-200: #CEDACE;
--color-forest-green-300: #B0C3AF;
--color-forest-green-400: #88A487;
--color-forest-green-500: #2C5F2D;
--color-forest-green-600: #224C23;
--color-forest-green-700: #173818;
--color-forest-green-800: #091E0A;
--color-forest-green-900: #020802;
--color-gold-50: #FCFAF4;
--color-gold-100: #FAF6E9;
--color-gold-200: #F6EED8;
--color-gold-300: #EFE3BE;
--color-gold-400: #E7D49B;
--color-gold-500: #D4AF37;
--color-gold-600: #AD8F2B;
--color-gold-700: #836B1E;
--color-gold-800: #4C3D0E;
--color-gold-900: #201803;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'forest-green': {
50: '#F2F5F1',
100: '#E4EBE4',
200: '#CEDACE',
300: '#B0C3AF',
400: '#88A487',
500: '#2C5F2D',
600: '#224C23',
700: '#173818',
800: '#091E0A',
900: '#020802',
},
'gold': {
50: '#FCFAF4',
100: '#FAF6E9',
200: '#F6EED8',
300: '#EFE3BE',
400: '#E7D49B',
500: '#D4AF37',
600: '#AD8F2B',
700: '#836B1E',
800: '#4C3D0E',
900: '#201803',
},
},
},
},
};
CSS variables
:root {
--forest-green-50: #F2F5F1;
--forest-green-100: #E4EBE4;
--forest-green-200: #CEDACE;
--forest-green-300: #B0C3AF;
--forest-green-400: #88A487;
--forest-green-500: #2C5F2D;
--forest-green-600: #224C23;
--forest-green-700: #173818;
--forest-green-800: #091E0A;
--forest-green-900: #020802;
--gold-50: #FCFAF4;
--gold-100: #FAF6E9;
--gold-200: #F6EED8;
--gold-300: #EFE3BE;
--gold-400: #E7D49B;
--gold-500: #D4AF37;
--gold-600: #AD8F2B;
--gold-700: #836B1E;
--gold-800: #4C3D0E;
--gold-900: #201803;
}SCSS variables
$forest-green-50: #F2F5F1; $forest-green-100: #E4EBE4; $forest-green-200: #CEDACE; $forest-green-300: #B0C3AF; $forest-green-400: #88A487; $forest-green-500: #2C5F2D; $forest-green-600: #224C23; $forest-green-700: #173818; $forest-green-800: #091E0A; $forest-green-900: #020802; $gold-50: #FCFAF4; $gold-100: #FAF6E9; $gold-200: #F6EED8; $gold-300: #EFE3BE; $gold-400: #E7D49B; $gold-500: #D4AF37; $gold-600: #AD8F2B; $gold-700: #836B1E; $gold-800: #4C3D0E; $gold-900: #201803;
JSON tokens
{
"forest-green": {
"50": "#F2F5F1",
"100": "#E4EBE4",
"200": "#CEDACE",
"300": "#B0C3AF",
"400": "#88A487",
"500": "#2C5F2D",
"600": "#224C23",
"700": "#173818",
"800": "#091E0A",
"900": "#020802"
},
"gold": {
"50": "#FCFAF4",
"100": "#FAF6E9",
"200": "#F6EED8",
"300": "#EFE3BE",
"400": "#E7D49B",
"500": "#D4AF37",
"600": "#AD8F2B",
"700": "#836B1E",
"800": "#4C3D0E",
"900": "#201803"
}
}How we name colors
There is no single official authority for naming colors. We use the common, widely recognized name as the primary label for each color (here, Forest Green and Gold); many common names are themselves W3C CSS named colors. For transparency we also show the nearest W3C CSS named color and the perceptual distance, ΔE, measured in OKLab. A small ΔE means the name is essentially exact; a larger one means it is the closest standard name rather than a perfect match.
Sources: W3C CSS Color Module Level 4 and the open color-name-list dataset, used to verify every color sits near a recognized name.