Moss Garden color palette
Damp stone covered in moss, from dark olive #556B2F through olive drab and a bright yellow-green, #9ACD32, to sage and pale moss, #E8F0D8. All five lean yellow, which makes the greens feel organic and plant-like. Garden centers, landscape designers, organic farms, outdoor schools and herbal tea brands fit it, and it carries over well to printed seed packets and labels.
Moss Garden palette in use
Headings and text in #556B2F read well on a #E8F0D8 page. #6B8E23 works for buttons, #C5D8A4 for cards and sidebars, and #9ACD32 for icons and small highlights.
This pair measures 5.06:1, so it works for body text too. The button uses #9ACD32 with black text.
ButtonGood for
- Garden center website
- Landscape design portfolio
- Organic farm box
- Herbal tea packaging
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 |
|---|---|---|---|
#556B2F | #E8F0D8 | 5.06:1 | AA |
#556B2F | #C5D8A4 | 3.88:1 | AA large |
#6B8E23 | #E8F0D8 | 3.24:1 | AA large |
#556B2F | #9ACD32 | 3.15:1 | AA large |
Moss Garden palette as code
CSS variables
:root {
--moss-garden-1: #556B2F;
--moss-garden-2: #6B8E23;
--moss-garden-3: #9ACD32;
--moss-garden-4: #C5D8A4;
--moss-garden-5: #E8F0D8;
}Tailwind v4
@theme {
--color-moss-garden-1: #556B2F;
--color-moss-garden-2: #6B8E23;
--color-moss-garden-3: #9ACD32;
--color-moss-garden-4: #C5D8A4;
--color-moss-garden-5: #E8F0D8;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'moss-garden': {
100: '#556B2F',
200: '#6B8E23',
300: '#9ACD32',
400: '#C5D8A4',
500: '#E8F0D8',
},SCSS
$moss-garden-1: #556B2F;
$moss-garden-2: #6B8E23;
$moss-garden-3: #9ACD32;
$moss-garden-4: #C5D8A4;
$moss-garden-5: #E8F0D8;JSON
["#556B2F","#6B8E23","#9ACD32","#C5D8A4","#E8F0D8"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.