Mint Green Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#36D399oklch(0.773 0.153 163.1)
Secondary
#9936D3oklch(0.550 0.229 309.4)
Accent
#D39936oklch(0.722 0.131 76.8)
Live UI Component Preview
Apex Analytics
Team Dashboard
$84,290
14,820
Optimal
Interactive Button & State Styles
Verify clickability, state contrasts, and visual weight across primary and secondary controls.
WCAG 2.1 Contrast Matrix
Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).
| Color Role | Hex | On Pure White (#FFF) | On Dark Obsidian (#0B0F19) | Recommended Usage |
|---|---|---|---|---|
Primary Base | #36D399 | 1.92:1(Fail) | 9.97:1(AAA) | Best on Dark UI / Buttons |
Secondary | #9936D3 | 5.49:1(AA) | 3.49:1(AA (large text)) | Best on Light UI / Backgrounds |
Accent | #D39936 | 2.51:1(Fail) | 7.64:1(AAA) | Best on Dark UI / Buttons |
50–950 Tailwind Shade Ramp
Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.
Ready-to-Use Code Snippets
// tailwind.config.js / CSS @theme
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F5F9F8',
100: '#E9F2EE',
200: '#BCF0DD',
300: '#92E7C8',
400: '#60DCAF',
500: '#36D399',
600: '#27B07D',
700: '#1F8E65',
800: '#17694B',
900: '#0B4B34',
950: '#072C1F',
},
secondary: '#9936D3',
accent: '#D39936',
}
}
}
};How to Use Mint Green in Digital Product Design
Mint Green (158° hue) introduces fresh, oxygenated clarity into digital interfaces. It eliminates visual weight, creating airy, welcoming spaces that reduce user anxiety during complex workflows.
✓Recommended UI Applications
Active toggle switches, health metric rings, clean notification cards, and background highlight washes. Exceptionally popular in modern telehealth and sustainable tech.
⚠Accessibility & Contrast Guidelines
Mint green is bright and reflective; always use dark text (#064E3B or #0F172A) on mint buttons to pass WCAG 2.1 AA requirements with an 8.5:1 ratio.
Curated UI Pairings for Mint Green
Expertly tested color coordinates that harmonize with Mint Green without visual clashes.
Lavender Accent
#C084FCTriadic partner creating trendy pastel harmonies.
Deep Pine
#064E3BHigh-contrast text and border anchor.
Frost Wash
#F0FDF4Subtle backdrop surface for spacious card grids.
Mint Green Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#34D399
rgb(52, 211, 153)
hsl(158°, 64%, 52%)
oklch(0.773 0.153 163.2)
Frequently Asked Questions About Mint Green
What primary role should Mint Green take in a digital interface?
Mint Green (158° hue) introduces fresh, oxygenated clarity into digital interfaces. It eliminates visual weight, creating airy, welcoming spaces that reduce user anxiety during complex workflows. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.
How do I maintain WCAG AA accessibility when using Mint Green?
Mint green is bright and reflective; always use dark text (#064E3B or #0F172A) on mint buttons to pass WCAG 2.1 AA requirements with an 8.5:1 ratio. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Mint Green into Tailwind CSS?
Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.
Related Design Color Wheels
Aesthetic
#9D8DF1Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.
Soft Autumn
#B86B53Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.
Deep Winter
#1E3A8AHigh-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.
Soft Summer
#9B8EB9Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.