Palette

Oceanic Sapphire Depths

Deep, mesmerizing blues ranging from royal to navy, capturing the profound mystery of the open ocean's sapphire depths.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Sapphire 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 Oceanic Sapphire Depths.

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

Data visualization

#000080#0000CD#4169E1#6495ED#191970

Palette guide

How to use Oceanic Sapphire Depths

Overview

The Oceanic Sapphire Depths palette immerses viewers in a profound range of deep, mesmerizing blues, from the intense #000080 to the majestic #4169E1, and including the vibrant #0000CD, the serene #6495ED, and the foundational #191970. This collection is perfect for designers and developers seeking to convey mystery, authority, and unwavering stability. It's an ideal choice for projects that require a sophisticated, serious, and deeply calming aesthetic, reminiscent of the open ocean's profound and beautiful sapphire depths.

Best used for

Luxury brand identity and packaging
High-end corporate websites and reports
Educational institutions and academic publications
Security software and cybersecurity platforms
Astronomy or space-themed digital experiences
Men's fashion and lifestyle branding

Suggested color roles

primary

Utilize #000080 as a dominant primary color for backgrounds or main brand elements, establishing deep authority.

secondary

Apply #191970 for supporting sections, navigation, or sub-headings, providing a solid, dark foundation.

accent

Highlight key information or interactive elements with #4169E1 or #0000CD, ensuring visibility and a touch of vibrancy.

background

The slightly lighter #6495ED can serve as a calming background for content, offering a subtle contrast to deeper blues.

text

For all colors in this palette, white or a very light gray text is essential for optimal readability and contrast.

Accessibility notes

White text provides excellent contrast on all colors in this palette, especially #000080, #0000CD, #4169E1, and #191970.
Avoid using dark text on any of these deep blue hues, as it will be illegible.
Ensure interactive elements are clearly distinguishable, relying on contrast with white text or subtle borders.
Always verify text and background color combinations with WCAG contrast tools to ensure accessibility.

Recommended combinations

Deepest Ocean

Creates a profound, serious, and luxurious feel, ideal for formal branding or dark mode interfaces.

#000080 · #191970 · #0000CD

Sapphire Flow

Offers a smooth, elegant gradient from vibrant to deep, suitable for backgrounds, headers, or data visualization.

#4169E1 · #6495ED · #000080

Regal Depths

Provides a balanced yet powerful combination, perfect for sophisticated layouts or accentuating important details.

#0000CD · #191970 · #4169E1

CSS variables

:root {
  --oceanic-sapphire-depths-1: #000080;
  --oceanic-sapphire-depths-2: #0000CD;
  --oceanic-sapphire-depths-3: #4169E1;
  --oceanic-sapphire-depths-4: #6495ED;
  --oceanic-sapphire-depths-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-sapphire-depths": {
        1: "#000080",
        2: "#0000CD",
        3: "#4169E1",
        4: "#6495ED",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#4169E1

Color 4#6495ED

Color 5#191970

Accessibility

Contrast checker

1.4:1Fail

3.3:1AA18

5.4:1AA

1.1:1Fail

1.4:1Fail

2.3:1Fail

3.8:1AA18

1.3:1Fail

3.3:1AA18

2.3:1Fail

1.6:1Fail

3.1:1AA18

5.4:1AA

3.8:1AA18

1.6:1Fail

5:1AA

1.1:1Fail

1.3:1Fail

3.1:1AA18

5:1AA

Similar palettes

More like Oceanic Sapphire Depths