Monochrome Ice color palette
One cool, desaturated blue is stepped from frost #E8EFF9 to slate navy #2E4D73. It's calm and businesslike, without the brightness of a primary blue. Five evenly spaced values from one hue make it practical for interfaces, where backgrounds, borders, muted text and headings need to look like they belong together. Consulting decks and B2B dashboards are where it works best.
Monochrome Ice palette in use
Use #E8EFF9 for the background, #C5D5EE for borders and cards, and #2E4D73 for headings and body text. #5C7FA3 works as the button color, and #92ADC9 for icons and placeholder text.
This pair measures 7.48:1, so it works for body text too. The button uses #5C7FA3 with black text.
ButtonGood for
- B2B SaaS interface
- Consulting pitch deck
- Legal tech dashboard
- Winter product catalog
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 |
|---|---|---|---|
#2E4D73 | #E8EFF9 | 7.48:1 | AAA |
#2E4D73 | #C5D5EE | 5.82:1 | AA |
#2E4D73 | #92ADC9 | 3.72:1 | AA large |
#5C7FA3 | #E8EFF9 | 3.61:1 | AA large |
Monochrome Ice palette as code
CSS variables
:root {
--monochrome-ice-1: #E8EFF9;
--monochrome-ice-2: #C5D5EE;
--monochrome-ice-3: #92ADC9;
--monochrome-ice-4: #5C7FA3;
--monochrome-ice-5: #2E4D73;
}Tailwind v4
@theme {
--color-monochrome-ice-1: #E8EFF9;
--color-monochrome-ice-2: #C5D5EE;
--color-monochrome-ice-3: #92ADC9;
--color-monochrome-ice-4: #5C7FA3;
--color-monochrome-ice-5: #2E4D73;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'monochrome-ice': {
100: '#E8EFF9',
200: '#C5D5EE',
300: '#92ADC9',
400: '#5C7FA3',
500: '#2E4D73',
},SCSS
$monochrome-ice-1: #E8EFF9;
$monochrome-ice-2: #C5D5EE;
$monochrome-ice-3: #92ADC9;
$monochrome-ice-4: #5C7FA3;
$monochrome-ice-5: #2E4D73;JSON
["#E8EFF9","#C5D5EE","#92ADC9","#5C7FA3","#2E4D73"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.