Earthy Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#546A2Foklch(0.492 0.089 126.4)
Secondary
#2F546Aoklch(0.428 0.056 236.2)
Accent
#6A2F54oklch(0.398 0.097 343.9)
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 | #546A2F | 6.04:1(AA) | 3.17:1(AA (large text)) | Best on Light UI / Backgrounds |
Secondary | #2F546A | 8.09:1(AAA) | 2.37:1(Fail) | Best on Light UI / Backgrounds |
Accent | #6A2F54 | 9.78:1(AAA) | 1.96:1(Fail) | Best on Light UI / Backgrounds |
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: '#F8F9F6',
100: '#EEF0EA',
200: '#DAE6C6',
300: '#C4D7A3',
400: '#A8C478',
500: '#546A2F',
600: '#769541',
700: '#607935',
800: '#465927',
900: '#313F18',
950: '#1D250E',
},
secondary: '#2F546A',
accent: '#6A2F54',
}
}
}
};How to Use Earthy in Digital Product Design
An earthy color wheel draws directly from the natural geological world: rich loamy soil, moss-covered boulders, sun-baked clay, and weathered sandstone. By eliminating artificial high-saturation pigments, earthy palettes convey grounding authenticity, sustainability, and mindful tranquility.
✓Recommended UI Applications
The definitive palette for sustainable commerce, eco-conscious non-profits, organic farming marketplaces, and architectural studios. It evokes trust, environmental stewardship, and artisanal craftsmanship.
⚠Accessibility & Contrast Guidelines
Moss olive (#556B2F) provides 7.2:1 AAA contrast against white text, making it an exceptional accessible choice for primary buttons and elevated header navigation.
Curated UI Pairings for Earthy
Expertly tested color coordinates that harmonize with Earthy without visual clashes.
Terracotta Clay
#C86446Warm earthen accent for primary interactive buttons and key highlights.
Sandstone Linen
#F4EFEANatural unbleached fabric surface for warm-tinted card backgrounds.
Raw Umber Earth
#38281BProfound organic charcoal for headings, dividers, and icons.
Earthy Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#556B2F
rgb(85, 107, 47)
hsl(82°, 39%, 30%)
oklch(0.496 0.090 126.2)
Frequently Asked Questions About Earthy
What primary role should Earthy take in a digital interface?
An earthy color wheel draws directly from the natural geological world: rich loamy soil, moss-covered boulders, sun-baked clay, and weathered sandstone. By eliminating artificial high-saturation pigments, earthy palettes convey grounding authenticity, sustainability, and mindful tranquility. 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 Earthy?
Moss olive (#556B2F) provides 7.2:1 AAA contrast against white text, making it an exceptional accessible choice for primary buttons and elevated header navigation. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Earthy 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.