Deep Autumn Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#C05621oklch(0.579 0.150 43.8)
Secondary
#21C056oklch(0.708 0.193 148.5)
Accent
#5621C0oklch(0.437 0.221 288.5)
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 | #C05621 | 4.57:1(AA) | 4.19:1(AA (large text)) | Best on Light UI / Backgrounds |
Secondary | #21C056 | 2.40:1(Fail) | 7.97:1(AAA) | Best on Dark UI / Buttons |
Accent | #5621C0 | 8.84:1(AAA) | 2.17: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: '#F9F7F5',
100: '#F2EBE8',
200: '#F3CDB9',
300: '#ECAD8E',
400: '#E38759',
500: '#C05621',
600: '#B7521F',
700: '#944219',
800: '#6D3112',
900: '#4F2008',
950: '#2E1305',
},
secondary: '#21C056',
accent: '#5621C0',
}
}
}
};12-Tone Deep Autumn Color Wheel Chart & Hex Codes
Warm golden undertones with deep shadow value and rich harvest intensity.
Burnt Spiced Persimmon
Signature Deep Autumn warm terracotta orange.
Dark Chocolate Cocoa
Nocturnal espresso anchor delivering 12:1 contrast.
Forest Moss Green
Deep botanical partner providing organic equilibrium.
Cinnamon Spice Rust
Deep hearth rust for conversion and focus rings.
Deep Mustard Ochre
Golden grain ochre bridging warmth and olive.
Blackberry Plum
Nocturnal plum for luxury dark mode headers.
Burnished Bronze Gold
Deep metallic gold for VIP tiers and highlights.
Warm Alabaster Cream
Warm paper parchment replacing sterile pure white.
Deep Forest Pine
Dense organic evergreen for headers and navigation.
Auburn Copper
High-octane warm copper for alerts and badges.
Toasted Sand Taupe
Warm neutral foundation for subtle container borders.
Spiced Wine Burgundy
Rich nocturnal red bringing romantic depth.
Deep Autumn Optical Dimensions Matrix
The three optical axes governing Deep Autumn palettes in design systems and seasonal analysis.
Warm-Neutral (Golden Honey & Cocoa)
Deep / Dark (Rich nocturnal low values)
Medium-High (Burnished spice & bronze)
How to Use Deep Autumn in Digital Product Design
Deep Autumn (Dark Autumn) sits at the seasonal boundary between True Autumn and Deep Winter. It blends the fiery, sun-drenched golden undertones of autumn with the profound depth and shadow of winter. The result is a luxurious, intensely grounded palette dominated by spiced persimmon, dark cocoa, forest moss, and burnished bronze.
✓Recommended UI Applications
Extensively used in artisanal branding, coffee & culinary e-commerce, boutique outdoor gear, and warm editorial publications. It delivers rustic elegance with exceptional visual richness.
⚠Accessibility & Contrast Guidelines
Burnt orange (#C05621) against white text provides 4.6:1 AA contrast. For buttons, pairing with dark chocolate text (#27170E) or alabaster cream (#FDF8F0) delivers AAA 9.2:1 readability.
Curated UI Pairings for Deep Autumn
Expertly tested color coordinates that harmonize with Deep Autumn without visual clashes.
Forest Moss Green
#3B5323Deep botanical partner providing organic equilibrium.
Alabaster Cream
#FDF8F0Warm parchment background replacing harsh pure white.
Dark Chocolate Roast
#2A1810Nocturnal espresso anchor delivering 12:1 contrast for headings.
Deep Autumn Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#C05621
rgb(192, 86, 33)
hsl(20°, 71%, 44%)
oklch(0.579 0.150 43.8)
Frequently Asked Questions About Deep Autumn
What primary role should Deep Autumn take in a digital interface?
Deep Autumn (Dark Autumn) sits at the seasonal boundary between True Autumn and Deep Winter. It blends the fiery, sun-drenched golden undertones of autumn with the profound depth and shadow of winter. The result is a luxurious, intensely grounded palette dominated by spiced persimmon, dark cocoa, forest moss, and burnished bronze. 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 Deep Autumn?
Burnt orange (#C05621) against white text provides 4.6:1 AA contrast. For buttons, pairing with dark chocolate text (#27170E) or alabaster cream (#FDF8F0) delivers AAA 9.2:1 readability. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Deep Autumn 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.