Palette

Deep Ocean Sapphire

Plunging blues from the ocean's surface to its mysterious depths, like a precious sapphire.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Sapphire 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 Ocean Sapphire.

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

Data visualization

#002B4B#0B4C6D#1D7296#4E9ACB#86C5ED

Palette guide

How to use Deep Ocean Sapphire

Overview

The Deep Ocean Sapphire palette offers a sophisticated range of cool blues, perfect for designs seeking depth, tranquility, and professionalism. Inspired by the ocean's mysterious depths and the brilliance of a sapphire, this collection transitions from the profound #002B4B to the serene #86C5ED. Designers and developers can leverage its harmonious progression to create immersive digital experiences or elegant brand identities. The mid-tones, like #1D7296 and #4E9ACB, provide excellent versatility for UI elements, while the darkest and lightest shades establish strong visual anchors. This palette evokes trust, stability, and a refreshing calm, making it a powerful choice for various applications.

Best used for

Corporate and tech branding
Maritime or aquatic-themed websites
Luxury product packaging
Wellness and spa app interfaces
Environmental conservation initiatives
Professional services marketing materials

Suggested color roles

primary

#002B4B. Ideal for primary brand color, large background areas in dark mode themes, or prominent headers, conveying authority and depth.

secondary

#0B4C6D. Excellent for sub-headings, secondary buttons, or large content blocks, providing a stable yet slightly lighter counterpoint to the primary.

accent

#4E9ACB. Use this vibrant shade for calls-to-action, interactive elements, or key data visualizations to draw attention without being overwhelming.

background

#86C5ED. A refreshing light blue, perfect for clean, airy background sections, card elements, or as a subtle accent background in lighter interfaces.

text

#002B4B. For crisp, readable body text on light backgrounds like #86C5ED, ensuring high contrast. For dark backgrounds, use white or a very light grey.

Accessibility notes

Ensure sufficient contrast (WCAG AA or AAA) when using lighter blues for text on darker blue backgrounds, especially with #4E9ACB or #86C5ED.
The darkest blue, #002B4B, provides excellent readability for text when paired with white or very light text colors.
Use #86C5ED for text sparingly on white backgrounds, as contrast may be too low for body copy; reserve it for large headings or decorative elements.
Test all color combinations for text and interactive elements to meet minimum contrast ratios, particularly for users with visual impairments.

Recommended combinations

Deep Sea Contrast

Striking visual contrast for headers, calls-to-action, and key information against a dark background, providing immediate focus.

#002B4B · #86C5ED · #4E9ACB

Ocean Gradient

Smooth transitions for data visualization, progress bars, or layered UI elements, creating a sense of depth and flow.

#0B4C6D · #1D7296 · #4E9ACB

Professional Calm

A balanced, professional look for corporate dashboards or clean websites, using the darkest for text, mid-tone for accents, and lightest for backgrounds.

#002B4B · #0B4C6D · #86C5ED

CSS variables

:root {
  --deep-ocean-sapphire-1: #002B4B;
  --deep-ocean-sapphire-2: #0B4C6D;
  --deep-ocean-sapphire-3: #1D7296;
  --deep-ocean-sapphire-4: #4E9ACB;
  --deep-ocean-sapphire-5: #86C5ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-sapphire": {
        1: "#002B4B",
        2: "#0B4C6D",
        3: "#1D7296",
        4: "#4E9ACB",
        5: "#86C5ED",
      }
    }
  }
}

Hex values

Color 1#002B4B

Color 2#0B4C6D

Color 3#1D7296

Color 4#4E9ACB

Color 5#86C5ED

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

4.7:1AA

7.8:1AAA

1.6:1Fail

1.7:1Fail

3:1AA18

4.9:1AA

2.7:1Fail

1.7:1Fail

2.9:1Fail

4.7:1AA

3:1AA18

1.7:1Fail

1.6:1Fail

7.8:1AAA

4.9:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Deep Ocean Sapphire

Deep Ocean Sapphire

See it in context.

Ready when you are.

Built with Deep Ocean Sapphire.

How to use Deep Ocean Sapphire

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Sea Contrast

Ocean Gradient

Professional Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Deep Ocean Sapphire