Deep Winter Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#1E3B8Aoklch(0.381 0.136 265.2)
Secondary
#8A1E3Boklch(0.423 0.143 10.5)
Accent
#3B8A1Eoklch(0.562 0.160 139.0)
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 | #1E3B8A | 10.25:1(AAA) | 1.87:1(Fail) | Best on Light UI / Backgrounds |
Secondary | #8A1E3B | 9.01:1(AAA) | 2.12:1(Fail) | Best on Light UI / Backgrounds |
Accent | #3B8A1E | 4.34:1(AA (large text)) | 4.41:1(AA (large text)) | 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: '#F5F6F9',
100: '#E9EBF2',
200: '#BCCAF0',
300: '#92A9E7',
400: '#6081DC',
500: '#1E3B8A',
600: '#274BB0',
700: '#1F3D8E',
800: '#172D69',
900: '#0B1C4B',
950: '#07112C',
},
secondary: '#8A1E3B',
accent: '#3B8A1E',
}
}
}
};12-Tone Deep Winter Color Wheel Chart & Hex Codes
Cool icy undertones with deep value and high-contrast jewel clarity.
Obsidian Deep Navy
Near-black base commanding executive authority.
Icy Cobalt Blue
Stark royal blue for primary interactive states.
Electric Sapphire
Luminous contrast pop for icons and focus rings.
Deep Crimson Ruby
Saturated jewel red for primary action badges.
Vivid Magenta Berry
Electric cool berry for energetic conversion.
Emerald Forest Jewel
Deep mineral green for prestige indicators.
Deep Royal Plum
Rich nocturnal purple for secondary tags.
Glacial Ice Silver
Crisp cool metallic surface.
Cool Platinum Slate
Secondary text and structural hairline borders.
Black Cherry Obsidian
Velvet dark red for luxury dark mode headers.
Royal Indigo Midnight
Profound deep indigo for contrast equilibrium.
Pure Arctic White
Pristine contrasting beacon on dark obsidian.
Deep Winter Optical Dimensions Matrix
The three optical axes governing Deep Winter palettes in design systems and seasonal analysis.
Cool (Blue / Obsidian undertones)
Deep / Dark (Stark high value range)
High Clarity (Rich saturated jewel tones)
How to Use Deep Winter in Digital Product Design
Deep Winter is the darkest and most dramatic season in the 12-season color analysis system. Positioned between Dark Autumn and True Winter, its hallmarks are cool undertones, deep value (dark depth), and vivid clarity. It embraces stark, icy contrasts, crisp pure white, and saturated jewel tones rather than muted earth tones.
✓Recommended UI Applications
Deep Winter is the standard palette for luxury fintech, cybersecurity, dark-mode developer portals, and high-contrast editorial portfolios. In UI design, obsidian backdrops (#090D16) paired with icy cobalt (#38BDF8) and crimson ruby (#991B1B) create unmistakable visual authority.
⚠Accessibility & Contrast Guidelines
Deep Winter colors excel at digital accessibility. Navy 900 (#1E3A8A) delivers a massive 12.8:1 contrast on white (AAA rating), and pure white text on obsidian surfaces achieves flawless 18:1 readability.
Curated UI Pairings for Deep Winter
Expertly tested color coordinates that harmonize with Deep Winter without visual clashes.
Icy Cobalt Highlight
#38BDF8Luminous cool accent for icons, focus rings, and active tags.
Crimson Ruby Anchor
#991B1BDeep jewel red for primary alerts, errors, and key action points.
Obsidian Canvas
#0B0F19Near-black base providing maximum AAA contrast against light text.
Deep Winter Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#1E3A8A
rgb(30, 58, 138)
hsl(224°, 64%, 33%)
oklch(0.379 0.138 265.5)
Frequently Asked Questions About Deep Winter
What primary role should Deep Winter take in a digital interface?
Deep Winter is the darkest and most dramatic season in the 12-season color analysis system. Positioned between Dark Autumn and True Winter, its hallmarks are cool undertones, deep value (dark depth), and vivid clarity. It embraces stark, icy contrasts, crisp pure white, and saturated jewel tones rather than muted earth tones. 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 Winter?
Deep Winter colors excel at digital accessibility. Navy 900 (#1E3A8A) delivers a massive 12.8:1 contrast on white (AAA rating), and pure white text on obsidian surfaces achieves flawless 18: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 Winter 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.
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.