Palette

Pearl Diving Depths

A serene gradient of deep ocean blues, culminating in the glistening white of a pearl's surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pearl Diving Depths 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 Pearl Diving Depths.

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

Data visualization

#191970#4169E1#6495ED#B0E0E6#F0FFFF

Palette guide

How to use Pearl Diving Depths

Overview

The Pearl Diving Depths palette is a serene gradient of deep ocean blues, culminating in the glistening white of a pearl's surface. It starts with the intense #191970 (Midnight Blue), moving through the rich #4169E1 (Royal Blue) and the calming #6495ED (Cornflower Blue). The palette then transitions to the ethereal #B0E0E6 (Powder Blue) and finishes with the pristine #F0FFFF (Azure), evoking clarity and purity. This collection is perfect for designers seeking to convey depth, tranquility, and elegance, ideal for projects that require a sophisticated, cool, and clean visual identity, reminiscent of the ocean's serene beauty.

Best used for

Marine conservation and environmental organizations
High-tech or data visualization interfaces
Luxury spa or resort branding
Water-themed product packaging
Modern corporate website designs
Calm and focused mobile app interfaces

Suggested color roles

primary

Use #191970 or #4169E1 as a dominant background or main color to establish depth and sophistication.

secondary

Apply #6495ED for supportive elements, creating a smooth transition and adding visual interest.

accent

Utilize #B0E0E6 for subtle highlights, interactive elements, or a touch of lightness against deeper tones.

background

The lightest #F0FFFF is ideal for clean, airy backgrounds, evoking the pearl's surface.

text

White or very light gray text on #191970 and #4169E1; deep blue or black text on #B0E0E6 and #F0FFFF for optimal readability.

Accessibility notes

Ensure sufficient contrast for text. White text works well on #191970 and #4169E1.
Darker text (e.g., black or dark blue) is essential for readability on #6495ED, #B0E0E6, and #F0FFFF.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards.
Avoid using light blue text on similar light blue backgrounds to prevent legibility issues for all users.

Recommended combinations

Deep Ocean

A strong dark base, a vibrant blue, and a pristine white for powerful, clean contrast.

#191970 · #4169E1 · #F0FFFF

Pearl Surface

Light, airy background with an almost white highlight and a calming blue accent.

#B0E0E6 · #F0FFFF · #6495ED

Gradient Depths

Creates a seamless blue gradient, ideal for backgrounds, banners, or layered UI elements.

#4169E1 · #6495ED · #191970

CSS variables

:root {
  --pearl-diving-depths-1: #191970;
  --pearl-diving-depths-2: #4169E1;
  --pearl-diving-depths-3: #6495ED;
  --pearl-diving-depths-4: #B0E0E6;
  --pearl-diving-depths-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pearl-diving-depths": {
        1: "#191970",
        2: "#4169E1",
        3: "#6495ED",
        4: "#B0E0E6",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6495ED

Color 4#B0E0E6

Color 5#F0FFFF

Accessibility

Contrast checker

3.1:1AA18

5:1AA

10.4:1AAA

14.5:1AAA

3.1:1AA18

1.6:1Fail

3.4:1AA18

4.7:1AA

5:1AA

1.6:1Fail

2.1:1Fail

2.9:1Fail

10.4:1AAA

3.4:1AA18

2.1:1Fail

1.4:1Fail

14.5:1AAA

4.7:1AA

2.9:1Fail

1.4:1Fail

Similar palettes

More like Pearl Diving Depths

Abyssal Current Glide