Soft Autumn Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#B86951oklch(0.604 0.108 37.7)
Secondary
#51B869oklch(0.702 0.149 148.8)
Accent
#6951B8oklch(0.512 0.156 290.6)
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 | #B86951 | 4.06:1(AA (large text)) | 4.72:1(AA) | Best on Dark UI / Buttons |
Secondary | #51B869 | 2.50:1(Fail) | 7.67:1(AAA) | Best on Dark UI / Buttons |
Accent | #6951B8 | 6.05:1(AA) | 3.16:1(AA (large text)) | 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: '#F9F7F6',
100: '#F0ECEA',
200: '#E7CDC5',
300: '#D9AEA1',
400: '#C78875',
500: '#B86951',
600: '#98533E',
700: '#7B4332',
800: '#5B3125',
900: '#402017',
950: '#26130D',
},
secondary: '#51B869',
accent: '#6951B8',
}
}
}
};12-Tone Soft Autumn Color Wheel Chart & Hex Codes
Warm golden undertones with medium depth and muted chroma.
Terracotta Clay
Hero Soft Autumn earthenware clay.
Spiced Pumpkin Rust
Deep harvest warmth for accent points.
Warm Apricot Peach
Soft luminous peach for light cards.
Harvest Mustard Ochre
Golden grain ochre bridging warmth and olive.
Muted Olive Moss
Botanical grounding neutral green.
Deep Forest Sage
Moody organic dark olive anchor.
Celadon Soft Sage
Eucalyptus and dried herb wash.
Muted Teal Slate
Smoky sea teal for cool equilibrium.
Smoky Slate Denim
Soft grayish blue replacing stark royal blue.
Warm Antique Rosewood
Dusty berry bringing romantic subtlety.
Warm Sand Taupe
Warm neutral foundation for subtle borders.
Alabaster Oat Cream
Warm paper-white replacing sterile white.
Soft Autumn Optical Dimensions Matrix
The three optical axes governing Soft Autumn palettes in design systems and seasonal analysis.
Warm-Neutral (Golden/Honey)
Medium (Sun-drenched mid-tones)
Low / Muted (Softened with grey & earth)
How to Use Soft Autumn in Digital Product Design
Soft Autumn is the signature palette of the 12-season color analysis system, positioned at the intersection of True Autumn and Soft Summer. Its primary characteristics are a warm golden undertone, medium lightness, and softly muted (desaturated) chroma. Instead of stark or flaming bright tones, Soft Autumn embodies the gentle tranquility of sun-faded leaves, earthenware clay, and harvest spice.
✓Recommended UI Applications
Soft Autumn palettes are extensively sought after for fashion capsules, wedding color boards, organic brand identity, and warm artisanal web designs. In UI design, muted terracotta, warm taupe, and sage olive create an inviting, grounded user interface that feels organic and handcrafted.
⚠Accessibility & Contrast Guidelines
Soft Autumn's mid-tone terracotta (#B86B53) and olive (#6E7F5E) achieve 4.6:1 AA contrast against white text when slightly darkened, but pair exceptionally well with cream alabaster (#FBF9F5) and deep espresso bronze (#3A2A1E) for 9.8:1 AAA readability.
Curated UI Pairings for Soft Autumn
Expertly tested color coordinates that harmonize with Soft Autumn without visual clashes.
Muted Olive Moss
#6E7F5ETriadic organic green partner creating natural equilibrium.
Alabaster Oat Canvas
#FBF9F5Warm paper-like surface replacing sterile pure white.
Deep Bronze Roast
#3A2A1EHigh-contrast espresso anchor for headings and body copy.
Soft Autumn Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#B86B53
rgb(184, 107, 83)
hsl(14°, 42%, 53%)
oklch(0.608 0.105 38.1)
Frequently Asked Questions About Soft Autumn
What primary role should Soft Autumn take in a digital interface?
Soft Autumn is the signature palette of the 12-season color analysis system, positioned at the intersection of True Autumn and Soft Summer. Its primary characteristics are a warm golden undertone, medium lightness, and softly muted (desaturated) chroma. Instead of stark or flaming bright tones, Soft Autumn embodies the gentle tranquility of sun-faded leaves, earthenware clay, and harvest spice. 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 Soft Autumn?
Soft Autumn's mid-tone terracotta (#B86B53) and olive (#6E7F5E) achieve 4.6:1 AA contrast against white text when slightly darkened, but pair exceptionally well with cream alabaster (#FBF9F5) and deep espresso bronze (#3A2A1E) for 9.8:1 AAA readability. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Soft 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.
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.
Warm Spring
#F59E0BRadiant, golden-infused high-clarity palette — featuring sunflower gold, coral peach, and warm turquoise.