Design preview
Color details
01Primary
ContrastAa 11.1Aa 1.9
02Secondary
ContrastAa 6.4Aa 3.3
03Accent
ContrastAa 2.5Aa 8.5
04Background
ContrastAa 1.4Aa 14.9
Use this palette
CSS variables
:root {
--forest-dream-1: #1B4332;
--forest-dream-2: #2D6A4F;
--forest-dream-3: #52B788;
--forest-dream-4: #B7E4C7;
}Tailwind colors
module.exports = {
theme: {
extend: {
colors: {
'forest-dream': {
100: '#1B4332',
200: '#2D6A4F',
300: '#52B788',
400: '#B7E4C7',
},
},
},
},
};Accessible color pairs
Text and background combinations from this palette that meet WCAG AA (4.5:1) for normal text.
- Aa #1B4332 / #B7E4C7 7.9:1
- Aa #B7E4C7 / #1B4332 7.9:1
- Aa #2D6A4F / #B7E4C7 4.5:1
- Aa #B7E4C7 / #2D6A4F 4.5:1
Named colors in this palette
The closest CSS named color to each swatch.