Back to palettes

Palette

Deep Azure Plunge

A monochromatic journey into the deep ocean, exploring the serene and mysterious shades of blue.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Azure Plunge 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 Deep Azure Plunge.

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

Data visualization

#0C2C43#1A4D6F#2A6E9B#4597C9#6EC0EC

Palette guide

How to use Deep Azure Plunge

Overview

The Deep Azure Plunge palette offers a monochromatic journey into the serene and mysterious shades of the deep ocean. Ranging from the profound #0C2C43 to the luminous #6EC0EC, with balanced mid-tones like #2A6E9B, this collection creates a calm and sophisticated aesthetic. Designers can build immersive web experiences or tranquil brand identities, while developers will find its consistent blue progression ideal for elegant gradients and clear UI states. This palette is perfectly suited for projects aiming for a sense of depth, tranquility, and professionalism.

Best used for

  • Marine conservation initiatives
  • Yachting and luxury travel brands
  • Web design for tech companies
  • Digital interfaces and dashboards
  • Meditation and wellness apps
  • Ocean-themed educational content

Suggested color roles

primary

Establish a solid, deep foundation with #0C2C43 for main backgrounds, navigation, or strong branding elements.

secondary

Use #1A4D6F for supporting content, subheadings, or secondary buttons, maintaining visual harmony.

accent

Highlight calls to action or key information with the bright #4597C9, providing a clear and inviting focal point.

background

The luminous #6EC0EC offers an airy, expansive background, while #0C2C43 creates a dramatic, immersive dark theme.

text

For dark backgrounds, white or a light gray ensures excellent readability. On lighter backgrounds, a deep charcoal or #0C2C43 provides crisp contrast.

Accessibility notes

  • Ensure sufficient contrast for text when using mid-tone blues like #1A4D6F and #2A6E9B as backgrounds.
  • Verify that the lightest blue, #6EC0EC, has adequate contrast for any overlaying text or icons.
  • Prioritize #0C2C43 for primary text on light backgrounds to meet WCAG AA standards.
  • Interactive elements should have clear visual indicators, especially when navigating between similar blue hues.

Recommended combinations

Ocean Depths

Ideal for creating layered backgrounds or headers, conveying depth and seriousness.

#0C2C43 · #1A4D6F · #2A6E9B

Azure Flow

Excellent for gradients or sections that require a sense of lightness and progression.

#2A6E9B · #4597C9 · #6EC0EC

Deep Contrast

Provides a strong visual hierarchy, balancing the darkest tone with the lightest for impact.

#0C2C43 · #6EC0EC · #1A4D6F

CSS variables

:root {
  --deep-azure-plunge-1: #0C2C43;
  --deep-azure-plunge-2: #1A4D6F;
  --deep-azure-plunge-3: #2A6E9B;
  --deep-azure-plunge-4: #4597C9;
  --deep-azure-plunge-5: #6EC0EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-azure-plunge": {
        1: "#0C2C43",
        2: "#1A4D6F",
        3: "#2A6E9B",
        4: "#4597C9",
        5: "#6EC0EC",
      }
    }
  }
}

Related searches

deep azure color schememonochromatic blue paletteocean inspired hex codescalm blue UI designwater theme colors

Palette colors

Hex values

Color 1#0C2C43
·
Color 2#1A4D6F
·
Color 3#2A6E9B
·
Color 4#4597C9
·
Color 5#6EC0EC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.5:1AA18
7.1:1AAA
2
1.6:1Fail
1.6:1Fail
2.8:1Fail
4.5:1AA18
3
2.6:1Fail
1.6:1Fail
1.7:1Fail
2.7:1Fail
4
4.5:1AA18
2.8:1Fail
1.7:1Fail
1.6:1Fail
5
7.1:1AAA
4.5:1AA18
2.7:1Fail
1.6:1Fail

Similar palettes

More like Deep Azure Plunge

View all monochrome
Azure Depths Gradient
Azure Ripple Effect
Azure Sky Grayscale
Deep Arctic Current
Cobalt Flow
Faded Denim Blues