Colormapped
Curated color palette

Blue Color Palette

A blue palette moving from a near-white cool surface through a saturated action blue to a deep navy.

Check the exact foreground/background pair instead of assuming every blue works with white text.

Palette colors

Background Ice #EAF4FF
Soft accent Sky #BDE0FE
Secondary accent Steel #5FA8D3
Primary action Royal #2563EB
Text / dark surface Deep Navy #0B1F3A

Each swatch chooses black or white label text using the higher WCAG contrast ratio for that single solid color. Final component contrast still depends on your actual text size and context.

Suggested use

Suitable for product UI, charts, editorial graphics, and visual systems that need a broad cool range from subtle surfaces to strong actions.

Surface Blue Color Palette Example action

CSS variables

:root {
  --palette-1: #EAF4FF;
  --palette-2: #BDE0FE;
  --palette-3: #5FA8D3;
  --palette-4: #2563EB;
  --palette-5: #0B1F3A;
}

Contrast snapshot

Ice #EAF4FF Best of black/white: 18.88:1
Sky #BDE0FE Best of black/white: 15.26:1
Steel #5FA8D3 Best of black/white: 8.03:1
Royal #2563EB Best of black/white: 5.17:1
Deep Navy #0B1F3A Best of black/white: 16.52:1

This is a quick black/white text comparison, not a full accessibility audit. Use the Contrast Checker for the exact foreground/background pair you plan to ship.

More Blue palette directions

Ocean blue

Cyan-to-navy progression for energetic digital surfaces.

#E0F2FE#7DD3FC#0284C7#0369A1#0C4A6E

Product blue

Balanced surface, action, and dark-anchor values.

#EFF6FF#BFDBFE#2563EB#1D4ED8#1E3A8A

Blue-gray

A lower-saturation blue direction for restrained interfaces.

#F1F5F9#CBD5E1#64748B#334155#0F172A

Related palettes

Calm Violet UI Palette

A restrained violet interface palette with neutral surfaces, a soft supporting violet, and a strong primary action color.

Dark Color Palette

A dark neutral palette for interfaces with near-black navy, charcoal, slate, and muted blue-gray values.

Green Color Palette

A balanced green palette with pale surfaces, fresh mids, a forest accent, and a deep green neutral.

Pastel Color Palette

A soft five-color pastel palette with pink, peach, green, blue, and lavender tones.