Glacial color palette
Light passing through clean ice. #F0FAFF and #D0ECFF are barely blue at all, #A0D8FF and #60BBFF get clearer and brighter, and #1A8ADB is a strong, saturated blue at the bottom. The set has an airy, clinical freshness that makes interfaces feel open. Use a navy for body copy, since even the darkest shade is mid-toned. Health tech apps and pharmacy brands will like how clean it looks.
Glacial palette in use
Use #F0FAFF for the background, #D0ECFF for cards, and #1A8ADB for buttons and large headings. #60BBFF suits icons and charts, and body text needs a deep navy.
This pair measures 19.82:1, so it works for body text too. The button uses #1A8ADB with black text.
ButtonGood for
- Health tech app
- Water filter brand
- SaaS onboarding flow
- Pharmacy website
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#1A8ADB | #F0FAFF | 3.47:1 | AA large |
#1A8ADB | #D0ECFF | 3.00:1 | AA large |
Glacial palette as code
CSS variables
:root {
--glacial-1: #F0FAFF;
--glacial-2: #D0ECFF;
--glacial-3: #A0D8FF;
--glacial-4: #60BBFF;
--glacial-5: #1A8ADB;
}Tailwind v4
@theme {
--color-glacial-1: #F0FAFF;
--color-glacial-2: #D0ECFF;
--color-glacial-3: #A0D8FF;
--color-glacial-4: #60BBFF;
--color-glacial-5: #1A8ADB;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'glacial': {
100: '#F0FAFF',
200: '#D0ECFF',
300: '#A0D8FF',
400: '#60BBFF',
500: '#1A8ADB',
},SCSS
$glacial-1: #F0FAFF;
$glacial-2: #D0ECFF;
$glacial-3: #A0D8FF;
$glacial-4: #60BBFF;
$glacial-5: #1A8ADB;JSON
["#F0FAFF","#D0ECFF","#A0D8FF","#60BBFF","#1A8ADB"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.