Soft Summer Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Adjacent Left
#8E97B8oklch(0.681 0.050 273.1)
Primary Base
#9B8EB8oklch(0.673 0.063 298.9)
Adjacent Right
#B08EB8oklch(0.692 0.071 319.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 |
|---|---|---|---|---|
Adjacent Left | #8E97B8 | 2.89:1(Fail) | 6.63:1(AA) | Best on Dark UI / Buttons |
Primary Base | #9B8EB8 | 3.02:1(AA (large text)) | 6.34:1(AA) | Best on Dark UI / Buttons |
Adjacent Right | #B08EB8 | 2.84:1(Fail) | 6.75: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: '#F6F7F8',
100: '#EAECF0',
200: '#CDD1E0',
300: '#ADB4CC',
400: '#8891B4',
500: '#8E97B8',
600: '#525D84',
700: '#434B6B',
800: '#31374E',
900: '#202537',
950: '#131620',
},
secondary: '#9B8EB8',
accent: '#B08EB8',
}
}
}
};12-Tone Soft Summer Color Wheel Chart & Hex Codes
Cool misty undertones with medium depth and smoky desaturated chroma.
Dusty Lavender
Soft floral violet for mindful app surfaces.
Slate Denim Blue
Subtle blue providing calm structure.
Smoky Antique Mauve
Desaturated romantic berry for badges.
Sea Mist Sage
Refreshing coastal green wash.
Rose Taupe Quartz
Warm-cool neutral balance for subtle cards.
Chalk Linen Cloud
Non-glare paper surface replacing white.
Cool Heather Grey
Dividers, hairline borders, and chip tags.
Dusky Plum Mauve
Deep soft plum for typography and buttons.
Twilight Sea Teal
Muted aquatic green for status indicators.
Powder Periwinkle
Gentle blue glow for selected items.
Soft Charcoal Slate
Legible dark text anchor with soft edges.
Cloud Mist Rose
Delicate backdrop for modal cards.
Soft Summer Optical Dimensions Matrix
The three optical axes governing Soft Summer palettes in design systems and seasonal analysis.
Cool-Neutral (Slate / Blue-Grey)
Medium (Gentle twilight mid-tones)
Low / Muted (Smoky sea mist desaturation)
How to Use Soft Summer in Digital Product Design
Soft Summer is the gentlest cool palette in seasonal color analysis, resting between True Summer and Soft Autumn. Its optical characteristics are cool undertones, medium depth, and softly desaturated chroma. Instead of stark icy tones, Soft Summer feels like a sea mist at twilight: dusty mauve, slate denim, heather grey, and muted lavender.
✓Recommended UI Applications
Soft Summer provides a serene, non-intrusive backdrop ideal for meditation apps, healthcare portals, serene SaaS workspaces, and boutique stationery. It prevents visual fatigue over long digital sessions.
⚠Accessibility & Contrast Guidelines
Soft Summer mid-tones like dusty lavender (#9B8EB9) and slate denim (#6C7D93) require dark charcoal (#1E293B) text on light cards to maintain WCAG AA compliance (ratio 5.5:1).
Curated UI Pairings for Soft Summer
Expertly tested color coordinates that harmonize with Soft Summer without visual clashes.
Slate Denim
#6C7D93Cool muted blue providing structural balance for buttons and headers.
Smoky Mauve
#A37B8ERomantic desaturated accent for notification tags and badges.
Sea Mist Linen
#ECEAE6Gentle cool-neutral canvas replacing harsh pure white.
Soft Summer Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#9B8EB9
rgb(155, 142, 185)
hsl(258°, 24%, 64%)
oklch(0.673 0.064 298.5)
Frequently Asked Questions About Soft Summer
What primary role should Soft Summer take in a digital interface?
Soft Summer is the gentlest cool palette in seasonal color analysis, resting between True Summer and Soft Autumn. Its optical characteristics are cool undertones, medium depth, and softly desaturated chroma. Instead of stark icy tones, Soft Summer feels like a sea mist at twilight: dusty mauve, slate denim, heather grey, and muted lavender. 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 Summer?
Soft Summer mid-tones like dusty lavender (#9B8EB9) and slate denim (#6C7D93) require dark charcoal (#1E293B) text on light cards to maintain WCAG AA compliance (ratio 5.5:1). Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Soft Summer 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.
Warm Spring
#F59E0BRadiant, golden-infused high-clarity palette — featuring sunflower gold, coral peach, and warm turquoise.