Frostbite color palette
Ice with a hint of cyan. #E8F8FF is nearly white, #B3E5FC and #4FC3F7 are bright frozen cyans, and #0288D1 and #01579B are strong, saturated blues. The brightness of the middle shades makes it feel electric, like ice under a clear sky. Winter sports shops and air conditioning companies are a natural audience.
Frostbite palette in use
Start with #01579B text on a #E8F8FF page. #0288D1 makes the button, #4FC3F7 suits icons and links on dark sections, and #B3E5FC works for cards.
This pair measures 6.80:1, so it works for body text too. The button uses #0288D1 with black text.
ButtonGood for
- Winter sports gear shop
- Air conditioning company
- Frozen dessert brand
- Hockey team branding
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 |
|---|---|---|---|
#01579B | #E8F8FF | 6.80:1 | AA |
#01579B | #B3E5FC | 5.47:1 | AA |
#01579B | #4FC3F7 | 3.69:1 | AA large |
#0288D1 | #E8F8FF | 3.54:1 | AA large |
Frostbite palette as code
CSS variables
:root {
--frostbite-1: #E8F8FF;
--frostbite-2: #B3E5FC;
--frostbite-3: #4FC3F7;
--frostbite-4: #0288D1;
--frostbite-5: #01579B;
}Tailwind v4
@theme {
--color-frostbite-1: #E8F8FF;
--color-frostbite-2: #B3E5FC;
--color-frostbite-3: #4FC3F7;
--color-frostbite-4: #0288D1;
--color-frostbite-5: #01579B;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'frostbite': {
100: '#E8F8FF',
200: '#B3E5FC',
300: '#4FC3F7',
400: '#0288D1',
500: '#01579B',
},SCSS
$frostbite-1: #E8F8FF;
$frostbite-2: #B3E5FC;
$frostbite-3: #4FC3F7;
$frostbite-4: #0288D1;
$frostbite-5: #01579B;JSON
["#E8F8FF","#B3E5FC","#4FC3F7","#0288D1","#01579B"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.