Cool Winter Color Wheel & UI Harmonies
Drag the handle around the wheel or use sliders below
Generated Harmonies (3 Colors)
Primary Base
#1D4FD7oklch(0.489 0.215 264.2)
Secondary
#D71D4Foklch(0.569 0.214 14.1)
Accent
#4FD71Doklch(0.774 0.239 139.7)
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 | #1D4FD7 | 6.66:1(AA) | 2.87:1(Fail) | Best on Light UI / Backgrounds |
Secondary | #D71D4F | 5.03:1(AA) | 3.81:1(AA (large text)) | Best on Light UI / Backgrounds |
Accent | #4FD71D | 1.90:1(Fail) | 10.10:1(AAA) | 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: '#F5F6FA',
100: '#E8EBF3',
200: '#B7C8F5',
300: '#8AA5EF',
400: '#547CE8',
500: '#1D4FD7',
600: '#1A45BC',
700: '#153899',
800: '#0F2970',
900: '#061A51',
950: '#030F30',
},
secondary: '#D71D4F',
accent: '#4FD71D',
}
}
}
};12-Tone Cool Winter Color Wheel Chart & Hex Codes
Pure icy blue undertones with sharp contrast and crystal-clear frost jewel saturation.
Royal Sapphire Blue
Quintessential Cool Winter electric royal sapphire.
Electric Magenta Berry
Shocking cool berry for primary conversion badges.
Glacial Ice Silver
Crisp cool metallic surface for elevated cards.
Arctic Midnight Obsidian
Velvet near-black anchor delivering 17:1 AAA legibility.
Pure Arctic White
Pristine contrasting beacon on dark surfaces.
Emerald Glacial Jewel
Cold mineral emerald for prestige indicators.
Icy Cobalt Highlight
Luminous cool frost for focus rings and links.
Crimson Frost Ruby
Saturated jewel red for primary action badges.
Deep Imperial Violet
Rich nocturnal purple for secondary chips.
Cool Platinum Slate
Secondary text and structural hairline borders.
Electric Cyan Glaze
Piercing cyan for telemetry meters.
Dusky Indigo Night
Profound deep indigo for contrast equilibrium.
Cool Winter Optical Dimensions Matrix
The three optical axes governing Cool Winter palettes in design systems and seasonal analysis.
Cool (Pure Blue / Ice Frost)
Medium to Deep (Stark optical contrast)
High Clarity (Uncompromising jewel saturation)
How to Use Cool Winter in Digital Product Design
Cool Winter (True Winter) is the quintessential icy archetype of seasonal color theory. Positioned between Deep Winter and Bright Winter, its defining characteristics are pure blue undertones, sharp contrast, and crystal-clear saturation. It has zero golden or orange warmth, celebrating the stark beauty of fresh arctic snow and deep sapphire twilight.
✓Recommended UI Applications
The premier palette for high-tech developer consoles, enterprise cloud software, medical instrumentation, and winter sports branding. The stark contrast between royal sapphire and glacial white creates crisp clarity.
⚠Accessibility & Contrast Guidelines
Cool Winter colors excel at digital accessibility. Royal sapphire (#1D4ED8) achieves 6.3:1 AA contrast on white, while stark obsidian navy (#060C1E) delivers 17:1 AAA legibility.
Curated UI Pairings for Cool Winter
Expertly tested color coordinates that harmonize with Cool Winter without visual clashes.
Electric Magenta
#BE185DTriadic jewel accent for high-urgency notifications and badges.
Glacial Ice Silver
#E2E8F0Cool metallic surface for elevated card panels.
Arctic Midnight
#060C1ENear-black velvet backdrop letting cool jewels radiate luminescence.
Cool Winter Design System Token Specifications
Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.
#1D4ED8
rgb(29, 78, 216)
hsl(224°, 76%, 48%)
oklch(0.488 0.217 264.4)
Frequently Asked Questions About Cool Winter
What primary role should Cool Winter take in a digital interface?
Cool Winter (True Winter) is the quintessential icy archetype of seasonal color theory. Positioned between Deep Winter and Bright Winter, its defining characteristics are pure blue undertones, sharp contrast, and crystal-clear saturation. It has zero golden or orange warmth, celebrating the stark beauty of fresh arctic snow and deep sapphire twilight. 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 Cool Winter?
Cool Winter colors excel at digital accessibility. Royal sapphire (#1D4ED8) achieves 6.3:1 AA contrast on white, while stark obsidian navy (#060C1E) delivers 17:1 AAA legibility. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.
How can I import Cool 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.
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.