Emerald Green Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Adjacent Left
#10B72Coklch(0.678 0.215 144.1)
Primary Base
#10B77Foklch(0.690 0.148 162.2)
Adjacent Right
#109BB7oklch(0.637 0.111 217.1)
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 |
|---|---|---|---|---|
Adjacent Left | #10B72C | 2.68:1(Fail) | 7.14:1(AAA) | Best on Dark UI / Buttons |
Primary Base | #10B77F | 2.59:1(Fail) | 7.39:1(AAA) | Best on Dark UI / Buttons |
Adjacent Right | #109BB7 | 3.28:1(AA (large text)) | 5.83:1(AA) | 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: '#F5FAF6',
100: '#E7F3E9',
200: '#B4F8BF',
300: '#85F498',
400: '#4DEF68',
500: '#10B72C',
600: '#11C52F',
700: '#0EA026',
800: '#0A751C',
900: '#01550F',
950: '#013209',
},
secondary: '#10B77F',
accent: '#109BB7',
}
}
}
};How to Use Emerald Green in Digital Product Design
Emerald Green (160° hue) represents growth, vitality, and financial prosperity. Positioned between minty cyan and grassy leaf greens, emerald conveys security and forward momentum. It is the gold standard accent for investment apps, fintech platforms, climate tech, and high-conversion e-commerce funnels.
✓Recommended UI Applications
Outstanding for positive KPI indicators, success toasts, checkout buttons, and primary interactive badges. When constructing dark mode interfaces, emerald green provides exceptional luminescence against deep obsidian (#090D16) backgrounds.
⚠Accessibility & Contrast Guidelines
Standard Emerald (#10B981) achieves 4.5:1 AA contrast with white text only when darkened slightly to Emerald 600 (#059669) or paired with deep charcoal (#064E3B) text. For dark mode buttons, crisp dark text on emerald provides peak legibility.
Curated UI Pairings for Emerald Green
Expertly tested color coordinates that harmonize with Emerald Green without visual clashes.
Split Complement
#F43F5ERose red accent for alert states and cancellation actions.
Dark Canvas
#064E3BDeep forest anchor for header banners and elevated navigation.
Clean Mint Wash
#ECFDF5Fresh surface wash for active table rows and success alert banners.
Emerald Green Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#10B981
rgb(16, 185, 129)
hsl(160°, 84%, 39%)
oklch(0.696 0.149 162.5)
Frequently Asked Questions About Emerald Green
What primary role should Emerald Green take in a digital interface?
Emerald Green (160° hue) represents growth, vitality, and financial prosperity. Positioned between minty cyan and grassy leaf greens, emerald conveys security and forward momentum. It is the gold standard accent for investment apps, fintech platforms, climate tech, and high-conversion e-commerce funnels. 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 Emerald Green?
Standard Emerald (#10B981) achieves 4.5:1 AA contrast with white text only when darkened slightly to Emerald 600 (#059669) or paired with deep charcoal (#064E3B) text. For dark mode buttons, crisp dark text on emerald provides peak legibility. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Emerald 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.