Back to palettes

Palette

Cobalt Whisper

A tranquil gradient of deep to light blues, like the quiet murmur of an unseen, vast ocean.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Whisper reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cobalt Whisper.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#004466#226688#5588AA#88BBCD#BBDDEE

Palette guide

How to use Cobalt Whisper

Overview

The Cobalt Whisper palette features a tranquil gradient of deep to light blues, like the quiet murmur of an unseen, vast ocean. With hues ranging from the profound #004466 to the airy #BBDDEE, this palette is perfect for designs that evoke serenity, professionalism, and a sense of calm. Designers can leverage #226688 as a strong primary, while #5588AA offers a versatile mid-tone for various applications. The brightest hue, #88BBCD, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, calm, and immersive visual experience, from corporate branding to digital interfaces.

Best used for

  • Corporate and business websites
  • Healthcare and wellness branding
  • Financial services interfaces
  • Meditation and mindfulness apps
  • Cloud computing services visuals
  • Professional portfolio websites

Suggested color roles

primary

#226688 - A deep, authoritative blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying trust and stability.

secondary

#5588AA - A vibrant, yet deep blue, suitable for subheadings, active states, or supporting graphic elements, adding dynamism.

accent

#BBDDEE - A bright, clear blue that provides a striking highlight, perfect for interactive elements, key data points, or urgent notifications, evoking a whisper.

background

#004466 - An intensely dark, almost black-blue, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter blues.

text

For text on #004466 or #226688, use #BBDDEE or white for optimal readability. For text on #BBDDEE, use black or #004466.

Accessibility notes

  • Ensure high contrast when placing light text, such as #BBDDEE, on darker blues like #004466 or #226688.
  • Avoid using #88BBCD for small text on #5588AA without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #BBDDEE, offers excellent contrast against all darker blues in the palette for interactive elements.
  • When using #BBDDEE as a background, ensure text is in a contrasting dark color like black or #004466 to maintain legibility.

Recommended combinations

Ocean Murmur

Creates a dramatic, high-contrast interface; #004466 for background, #5588AA for content, #BBDDEE for bright highlights/CTAs.

#004466 · #5588AA · #BBDDEE

Calm Tide

Use #226688 for main sections, #88BBCD for supporting elements, and #BBDDEE for vibrant accents or delicate details.

#226688 · #88BBCD · #BBDDEE

Deep Serenity

Ideal for creating depth through gradients or layered UI, moving from the deepest blue to a rich, true blue.

#004466 · #226688 · #5588AA

CSS variables

:root {
  --cobalt-whisper-1: #004466;
  --cobalt-whisper-2: #226688;
  --cobalt-whisper-3: #5588AA;
  --cobalt-whisper-4: #88BBCD;
  --cobalt-whisper-5: #BBDDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-whisper": {
        1: "#004466",
        2: "#226688",
        3: "#5588AA",
        4: "#88BBCD",
        5: "#BBDDEE",
      }
    }
  }
}

Related searches

deep blue calm paletteoceanic cool color schemeserene blue brandingwater themed UI designcool dark blues

Palette colors

Hex values

Color 1#004466
·
Color 2#226688
·
Color 3#5588AA
·
Color 4#88BBCD
·
Color 5#BBDDEE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
5:1AA
7.3:1AAA
2
1.6:1Fail
1.7:1Fail
3:1AA18
4.4:1AA18
3
2.7:1Fail
1.7:1Fail
1.8:1Fail
2.7:1Fail
4
5:1AA
3:1AA18
1.8:1Fail
1.5:1Fail
5
7.3:1AAA
4.4:1AA18
2.7:1Fail
1.5:1Fail

Similar palettes

More like Cobalt Whisper

View all cool
Azure Abyss Calm
Indigo Reef Current
Ocean Depth Mysteries
Serene Ocean Depths
Tranquil Abyss Depths
Abyssal Blue Descent