Sugar Mint
#c0e2c5
Cool, airy mint for clean cards and headers
About Sugar Mint
I keep seeing Sugar Mint pop up as that "fresh but finished" green on UI mockups. It's lighter than Mother Nature, but it doesn't drift toward the cool, watery chill of Delta Mint. Compared to both, it reads more uniformly green, with a calmer undertone that feels airy instead of garden-spring or mint-splash.
In practice, it's my go-to for light panels and subtle section headers when you want an alive look without turning the whole layout frosty. I use it for wellness and skincare product pages, onboarding and settings screens, and quiet backgrounds in health wearables where the UI needs clarity but still feels like it belongs. It also sits nicely in dashboards for retail merchandising or operations, especially in dashboards and finance apps where you need soft contrast around tables and charts.
If your palette runs warm, it can nudge slightly yellow-green, so I pair it with soft creams or neutral greys to keep it steady.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.