Palette

Azure Depths Gradient

A calming descent through varying shades of blue, evoking the serene and mysterious depths of the azure sea.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Depths Gradient 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 Azure Depths Gradient.

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

Data visualization

#000080#191970#4169E1#6495ED#ADD8E6

Palette guide

How to use Azure Depths Gradient

Overview

The Azure Depths Gradient palette offers a calming descent through varying shades of blue, evoking the serene and mysterious depths of the azure sea. It moves from the profound navy of #000080 and #191970, through the balanced mid-tones of #4169E1 and #6495ED, to the soft, ethereal #ADD8E6. Designers and developers will find this monochrome palette exceptionally useful for creating sophisticated, tranquil, and immersive digital experiences. Its progressive range of blues allows for subtle layering and impactful visual storytelling, ideal for projects requiring depth, focus, and a sense of calm.

Best used for

Science and technology websites
Luxury watch or jewelry brands
Meditation and mindfulness apps
Corporate branding (trust)
Space exploration themes
Deep-sea research organizations

Suggested color roles

primary

#000080 provides a commanding primary color, perfect for main branding, critical headers, or strong calls to action.

secondary

#191970 offers a slightly lighter, yet still deep, secondary shade, suitable for subheadings, navigation, or foundational elements.

accent

#4169E1 delivers a vibrant, engaging accent, ideal for interactive elements, data visualization, or key highlights.

background

#ADD8E6 creates a light, expansive backdrop, ensuring darker content is highly readable and the overall feel is open.

text

Use #000080 or #191970 for body text on #ADD8E6 or #6495ED backgrounds to guarantee excellent legibility.

Accessibility notes

Ensure #000080 text on #ADD8E6 backgrounds meets WCAG AA contrast standards.
Avoid using #ADD8E6 for small text on any other palette color due to insufficient contrast.
Use #000080 or #4169E1 for critical interactive elements to ensure clear visibility and functionality.
For large text, #6495ED on #ADD8E6 can work, but always verify contrast ratios.

Recommended combinations

Deep Ocean

Creates a profound, immersive gradient, perfect for dark mode themes or impactful hero sections.

#000080 · #191970 · #4169E1

Light Current

Ideal for lighter sections, providing a gentle flow of blues for backgrounds or subtle indicators.

#ADD8E6 · #6495ED · #4169E1

Contrast Focus

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and mid-tone support.

#000080 · #ADD8E6 · #6495ED

CSS variables

:root {
  --azure-depths-gradient-1: #000080;
  --azure-depths-gradient-2: #191970;
  --azure-depths-gradient-3: #4169E1;
  --azure-depths-gradient-4: #6495ED;
  --azure-depths-gradient-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-depths-gradient": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#6495ED",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#6495ED

Color 5#ADD8E6

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

5.4:1AA

10.5:1AAA

1.1:1Fail

3.1:1AA18

5:1AA

9.7:1AAA

3.3:1AA18

3.1:1AA18

1.6:1Fail

3.2:1AA18

5.4:1AA

5:1AA

1.6:1Fail

1.9:1Fail

10.5:1AAA

9.7:1AAA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Azure Depths Gradient