Cool Tones Palette — HEX Codes, Swatches & UI Palette
Like mountain streams, winter summits, and clear arctic skies. Calming, focused, and professional hues engineered to lower cognitive fatigue and foster deep mental concentration.
Color Swatches & Technical Specifications
Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Cool Tones Palette.
UI Design & Color Hierarchy Guide
The gold standard for developer tooling, SaaS applications, productivity software, and medical interfaces where clarity and calm precision are mandatory.
WCAG 2.1 Accessibility & Contrast Matrix
Legibility ratings between palette elements and key backgrounds (Lightest: Polar White Snow | Darkest: Ocean Sapphire):
| Swatch | Contrast vs Light Canvas | Contrast vs Dark Canvas |
|---|---|---|
| Ocean Sapphire (#1A5276) | 7.56:1 AAA | 1.0:1 Fail |
| Glacier Blue (#2980B9) | 3.89:1 AA Large | 1.94:1 Fail |
| Misty Cyan (#5DADE2) | 2.22:1 Fail | 3.4:1 AA Large |
| Arctic Frost (#A9CCE3) | 1.53:1 Fail | 4.95:1 AA |
| Polar White Snow (#EBF5FB) | 1.0:1 Fail | 7.56:1 AAA |
CSS Custom Properties & Design Tokens
Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:
:root {
--color-1: #1A5276; /* Ocean Sapphire - Focused Brand Primary */
--color-2: #2980B9; /* Glacier Blue - Interactive Element */
--color-3: #5DADE2; /* Misty Cyan - Soft Highlight */
--color-4: #A9CCE3; /* Arctic Frost - Gentle Surface Tint */
--color-5: #EBF5FB; /* Polar White Snow - Crisp Readability Surface */
}{
colors: {
'palette-1': '#1A5276',
'palette-2': '#2980B9',
'palette-3': '#5DADE2',
'palette-4': '#A9CCE3',
'palette-5': '#EBF5FB'
}
}Explore More Curated Color Palettes
Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.