Palette
A refreshing palette of deep greens and soft aquas, like a misty valley at dawn.
Preview
Interface
A quick look at how Emerald Valley Mist reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The Emerald Valley Mist palette offers a sophisticated gradient of deep to light muted greens, inspired by a tranquil, misty valley at dawn. Shades like the deep #184A3B, rich #326E5C, and airy #C1D0C9 provide a refreshing yet grounded feel. This palette, named Emerald Valley Mist, is excellent for designs aiming to create a sense of calm and natural elegance, proving useful for both digital interfaces and print applications seeking a refined, serene aesthetic.
primary
Utilize #184A3B as a deep, anchoring forest green for strong branding elements or backgrounds.
secondary
Employ #326E5C for rich, supportive mid-greens in content blocks or larger graphical areas.
accent
Introduce #8FB29F as a soft, refreshing highlight for calls to action or subtle decorative details.
background
Choose #C1D0C9 for airy, gentle backgrounds that promote a sense of calm and spaciousness.
text
For light backgrounds like #C1D0C9, use dark charcoal or black. For darker hues such as #184A3B, opt for white or a very light grey.
Creates rich, layered depth for natural landscapes, strong branding, or impactful visual hierarchy.
#184A3B · #326E5C · #5F927DOffers a soft, ethereal feel, ideal for backgrounds, gentle accents, and conveying tranquility.
#C1D0C9 · #8FB29F · #5F927DProvides a strong base with a soft, misty lift, suitable for headers, calls to action, and clear information.
#184A3B · #C1D0C9 · #8FB29F:root {
--emerald-valley-mist-1: #C1D0C9;
--emerald-valley-mist-2: #8FB29F;
--emerald-valley-mist-3: #5F927D;
--emerald-valley-mist-4: #326E5C;
--emerald-valley-mist-5: #184A3B;
}theme: {
extend: {
colors: {
"emerald-valley-mist": {
1: "#C1D0C9",
2: "#8FB29F",
3: "#5F927D",
4: "#326E5C",
5: "#184A3B",
}
}
}
}Palette colors
Accessibility
Similar palettes