Forest Green and Cream color palette
lemonchiffon · 0.007
The pairing feels calm and grounded, like a quiet room with morning light coming through. Forest Green #2C5F2D brings a deep, muted weight, while Cream #FFFDD0 softens the space with a warm, low-key glow. Nothing about it shouts.
In interiors, the green works on cabinetry, a feature wall, or upholstery, with cream walls or trim opening the room back up. For branding, the 7.27 to 1 makes cream text on a forest green field easy to read, which suits skincare, herbal goods, or anything leaning natural and considered.
Their sit only 39 degrees apart, so the blend stays harmonious. The midpoint lands on a soft sage (#93AB7B) if you need a bridge tone.
See Forest Green and Cream in use
better
Forest Green Tailwind scale (50-900)
Cream Tailwind scale (50-900)
Forest Green to Cream blend
A continuous interpolation from Forest Green to Cream, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Forest Green and Cream 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
Forest Green and Cream can be used together as text and background.
Contrast pairing grid
Rows are Forest Green steps, columns are Cream steps. Each mark is a Forest Green step shown on a Cream 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-cream-50: #FFFFFC;
--color-cream-100: #FFFFFA;
--color-cream-200: #FFFFF5;
--color-cream-300: #FFFEEE;
--color-cream-400: #FFFEE6;
--color-cream-500: #FFFDD0;
--color-cream-600: #D1CFAA;
--color-cream-700: #9E9D80;
--color-cream-800: #5D5D4B;
--color-cream-900: #29281F;
}
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',
},
'cream': {
50: '#FFFFFC',
100: '#FFFFFA',
200: '#FFFFF5',
300: '#FFFEEE',
400: '#FFFEE6',
500: '#FFFDD0',
600: '#D1CFAA',
700: '#9E9D80',
800: '#5D5D4B',
900: '#29281F',
},
},
},
},
};
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;
--cream-50: #FFFFFC;
--cream-100: #FFFFFA;
--cream-200: #FFFFF5;
--cream-300: #FFFEEE;
--cream-400: #FFFEE6;
--cream-500: #FFFDD0;
--cream-600: #D1CFAA;
--cream-700: #9E9D80;
--cream-800: #5D5D4B;
--cream-900: #29281F;
}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; $cream-50: #FFFFFC; $cream-100: #FFFFFA; $cream-200: #FFFFF5; $cream-300: #FFFEEE; $cream-400: #FFFEE6; $cream-500: #FFFDD0; $cream-600: #D1CFAA; $cream-700: #9E9D80; $cream-800: #5D5D4B; $cream-900: #29281F;
JSON tokens
{
"forest-green": {
"50": "#F2F5F1",
"100": "#E4EBE4",
"200": "#CEDACE",
"300": "#B0C3AF",
"400": "#88A487",
"500": "#2C5F2D",
"600": "#224C23",
"700": "#173818",
"800": "#091E0A",
"900": "#020802"
},
"cream": {
"50": "#FFFFFC",
"100": "#FFFFFA",
"200": "#FFFFF5",
"300": "#FFFEEE",
"400": "#FFFEE6",
"500": "#FFFDD0",
"600": "#D1CFAA",
"700": "#9E9D80",
"800": "#5D5D4B",
"900": "#29281F"
}
}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 Cream); 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.