Arctic Blue color palette

This one runs from pale ice #CAF0F8 down to a near-black navy, #03045E, with three clear, saturated blues in between. The middle shades #00B4D8 and #0077B6 are bright without tipping into neon. The overall feel is cold and clean. Water utilities, swim schools, cruise lines and winter sports brands fit it, and so do software companies that want a blue with more life than the usual corporate gray-blue.

#CAF0F8#CAF0F8Closest: Platinum

#90E0EF#90E0EFClosest: Light Blue

#00B4D8#00B4D8Closest: Tiffany Blue

#0077B6#0077B6Closest: Cerulean

#03045E#03045EClosest: Navy Blue

Edit in palette generatorCSS and Tailwind

Arctic Blue palette in use

#03045E handles text and the footer, #CAF0F8 makes a light page background, and #0077B6 is the button color. Keep #00B4D8 and #90E0EF for icons, charts and highlights.

Arctic Blue

Headline in #03045E on #CAF0F8

This pair measures 14.65:1, so it works for body text too. The button uses #0077B6 with white text.

Button

Good for

Swim school website
Water utility dashboard
Cruise line brochure
Ski resort app

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
`#03045E`	`#CAF0F8`	14.65:1	AAA
`#03045E`	`#90E0EF`	11.91:1	AAA
`#03045E`	`#00B4D8`	7.20:1	AAA
`#0077B6`	`#CAF0F8`	4.01:1	AA large
`#03045E`	`#0077B6`	3.64:1	AA large
`#0077B6`	`#90E0EF`	3.26:1	AA large

Arctic Blue palette as code

CSS variables

:root {
  --arctic-blue-1: #CAF0F8;
  --arctic-blue-2: #90E0EF;
  --arctic-blue-3: #00B4D8;
  --arctic-blue-4: #0077B6;
  --arctic-blue-5: #03045E;
}

Tailwind v4

@theme {
  --color-arctic-blue-1: #CAF0F8;
  --color-arctic-blue-2: #90E0EF;
  --color-arctic-blue-3: #00B4D8;
  --color-arctic-blue-4: #0077B6;
  --color-arctic-blue-5: #03045E;
}

Tailwind v3

// tailwind.config.js → theme.extend.colors
'arctic-blue': {
  100: '#CAF0F8',
  200: '#90E0EF',
  300: '#00B4D8',
  400: '#0077B6',
  500: '#03045E',
},

SCSS

$arctic-blue-1: #CAF0F8;
$arctic-blue-2: #90E0EF;
$arctic-blue-3: #00B4D8;
$arctic-blue-4: #0077B6;
$arctic-blue-5: #03045E;

JSON

["#CAF0F8","#90E0EF","#00B4D8","#0077B6","#03045E"]

Named colors in this palette

The nearest named color to each swatch, with its meaning and matching colors.

#E5E4E2Platinum #ADD8E6Light Blue #0ABAB5Tiffany Blue #007BA7Cerulean #000080Navy Blue

Similar palettes

Blueprint Winter Frost Frostbite Bluebell Glacial Deep Pixel

Browse all 129 palettes