Blue Color Palette: 6 Shades & Schemes with Hex Codes

Blue is the world's most popular colour — calm, trustworthy, and endlessly versatile. The right blue color palette can feel as fresh as the ocean or as serious as a corporate boardroom, which is why blue dominates everything from tech and finance brands to healthcare and social apps. This guide gives you six blue palettes with hex codes plus the meaning behind the colour.

Looking for colours to pair with blue rather than shades of it? See what colours go with blue. Otherwise, grab a palette below or browse the full PaletteCSS library.

What blue communicates

Blue is strongly associated with trust, calm, stability, and professionalism — which is exactly why so many banks and tech giants use it. Lighter blues feel fresh, airy, and friendly; deeper blues feel serious, premium, and dependable. Because blue is a cool colour, it also recedes visually, making it a great background that lets other elements come forward.

The blue family spans a wide range:

• Sky and powder blue — light, calm, and approachable.
• Ocean and teal blue — fresh and energetic.
• Royal and cobalt blue — confident and vivid.
• Navy and indigo — deep, serious, and premium.

6 blue color palettes (with hex codes)

1. Ocean Blue

Fresh aquatic tones from pale foam to deep sea.

#CAF0F8 · #90E0EF · #00B4D8 · #0077B6 · #03045E

2. Sky & Navy

A clean, corporate-friendly blue scale.

#E7F1FB · #9EC5E8 · #4A90D9 · #1B5FA8 · #0A2A55

3. Dusty Blue

Muted, sophisticated blue-greys.

#EAF0F4 · #C2D4E0 · #8FA9BE · #5B7C95 · #2E4456

4. Royal Blue

Bold and confident, great for modern brands.

#E6ECFF · #A9BEF5 · #5C7CFA · #3B5BDB · #1E3A8A

5. Teal Blue

Blue with a fresh green edge.

#E0F7FA · #80DEEA · #26C6DA · #0097A7 · #006064

6. Indigo

Deep blue-purple — calm but rich.

#EEF2FF · #C7D2FE · #818CF8 · #4F46E5 · #312E81

How to use a blue palette in CSS

:root {
  --blue-50:  #CAF0F8;
  --blue-200: #90E0EF;
  --blue-400: #00B4D8;
  --blue-600: #0077B6;
  --blue-900: #03045E;
}

body { color: var(--blue-900); }
a    { color: var(--blue-600); }

A cool blue gradient makes a clean hero background:

.hero {
  background: linear-gradient(135deg, #00B4D8 0%, #03045E 100%);
}

Tips for designing with blue

• Vary your shades. Use light blue for backgrounds and deep navy for text and headings.
• Add a warm accent. Blue can feel cold — a touch of coral, orange, or gold warms it up.
• Use navy instead of black. Deep navy text feels softer and more premium than pure black.
• Mind the mood. Bright blues feel energetic; muted, dusty blues feel calm and elegant.

Frequently asked questions

What is a good blue hex code?

A versatile blue is #0077B6; for a light background try #CAF0F8, and for deep text use navy #03045E.

What does blue represent?

Blue is associated with trust, calm, stability, and professionalism, which is why it is popular with tech, finance, and healthcare brands.

What colors go well with blue?

Blue pairs well with white, grey, warm accents like coral and gold, and analogous tones like teal and indigo. See our full guide on what colours go with blue.

Want more? Browse color palettes, read what colours go with blue, or build a blue gradient and copy the CSS.