Palette

Serene Deep Blue

A soothing gradient of deep to light blues, capturing the serene tranquility of the ocean's depths meeting the sky.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Deep Blue 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 Serene Deep Blue.

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

Data visualization

#0B212C#184157#2A668D#408BB3#60ACD8

Palette guide

How to use Serene Deep Blue

Overview

The Serene Deep Blue palette offers a captivating monochromatic gradient, transitioning from the profound depth of #0B212C to the tranquil lightness of #60ACD8. This collection of cool blues, including the mid-tones like #2A668D and #408BB3, evokes the serene tranquility of the ocean's depths meeting the sky. It's an ideal choice for projects aiming to convey calm, professionalism, and depth. Designers can leverage its inherent harmony to create sophisticated visual experiences, while developers will appreciate the predictable and cohesive color progression for UI elements, ensuring a consistent and soothing user interface without extensive color matching efforts.

Best used for

Corporate websites and branding
Meditation and wellness apps
Nautical-themed designs
Interior design concepts for relaxation spaces
Educational platforms focused on science or technology
High-end product packaging

Suggested color roles

primary

#184157 - A robust, foundational blue for main layouts and brand identity, offering a sense of stability.

secondary

#2A668D - A versatile mid-blue for subheadings, active states, or supporting graphic elements.

accent

#60ACD8 - A bright, refreshing blue perfect for calls-to-action, interactive elements, or highlighting key information.

background

#0B212C - A very deep, almost black blue for dramatic, immersive backgrounds or dark mode interfaces.

text

#408BB3 on #0B212C for lighter text, or a crisp white on darker blues for optimal readability.

Accessibility notes

Ensure sufficient contrast between text and background, especially for lighter blues like #60ACD8 against white or very light backgrounds.
Use #0B212C or #184157 for primary text against lighter backgrounds for WCAG AA compliance.
Avoid using #408BB3 on #60ACD8 for small text due to potential low contrast.
Consider a slightly off-white or light gray for text on #0B212C to soften the contrast while maintaining readability.

Recommended combinations

Deep Sea Contrast

High-contrast pairing for dramatic headlines or dark mode UI with a vibrant accent.

#0B212C · #60ACD8 · #184157

Oceanic Flow

A smooth, harmonious gradient ideal for progressive disclosure or layered UI elements.

#184157 · #2A668D · #408BB3

Sky & Depths

A striking combination of the lightest and darkest tones, balanced by a mid-range blue for depth.

#60ACD8 · #0B212C · #2A668D

CSS variables

:root {
  --serene-deep-blue-1: #0B212C;
  --serene-deep-blue-2: #184157;
  --serene-deep-blue-3: #2A668D;
  --serene-deep-blue-4: #408BB3;
  --serene-deep-blue-5: #60ACD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-deep-blue": {
        1: "#0B212C",
        2: "#184157",
        3: "#2A668D",
        4: "#408BB3",
        5: "#60ACD8",
      }
    }
  }
}

Hex values

Color 1#0B212C

Color 2#184157

Color 3#2A668D

Color 4#408BB3

Color 5#60ACD8

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

4.4:1AA18

6.6:1AA

1.5:1Fail

1.8:1Fail

2.9:1Fail

4.3:1AA18

2.7:1Fail

1.8:1Fail

1.6:1Fail

2.5:1Fail

4.4:1AA18

2.9:1Fail

1.6:1Fail

1.5:1Fail

6.6:1AA

4.3:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Serene Deep Blue

Serene Deep Blue

See it in context.

Ready when you are.

Built with Serene Deep Blue.

How to use Serene Deep Blue

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Sea Contrast

Oceanic Flow

Sky & Depths

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Serene Deep Blue