Palette

Oceanic Abyss Deep

From the deep abyss to the luminous surface, these blues capture the serene and mysterious spirit of the ocean.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Abyss Deep 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 Abyss Deep.

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

Data visualization

#000080#0000CD#00BFFF#87CEFA#F0F8FF

Palette guide

How to use Oceanic Abyss Deep

Overview

The "Oceanic Abyss Deep" palette vividly captures the serene and mysterious spirit of the ocean, transitioning from the deep abyss to the luminous surface. This cool and dynamic collection, featuring #000080, #0000CD, and #00BFFF, offers a powerful gradient of blues. Designers can leverage these hues to create immersive and visually striking interfaces, while developers will appreciate the distinct contrast between the profound depth of #000080 and the airy lightness of #F0F8FF. Ideal for projects that demand a sense of wonder, sophistication, and clarity, this palette ensures a cohesive and visually pleasing user experience, evoking the vastness and beauty of the oceanic world from its darkest trenches to its sunlit surface.

Best used for

Marine biology and conservation websites
Luxury travel experiences (ocean cruises)
High-performance sports apparel branding
Science fiction game interfaces
Data visualization dashboards
Technology company branding (innovation focus)

Suggested color roles

primary

Utilize #000080 as the foundational, deepest navy blue for backgrounds, large headers, or elements requiring significant visual weight, conveying profound depth.

secondary

Employ #0000CD as a supporting medium blue, excellent for sub-sections, card backgrounds, or secondary navigation, adding subtle differentiation.

accent

Introduce #00BFFF as a vibrant, clear accent, ideal for calls-to-action, progress indicators, or interactive elements, providing crucial contrast and energy.

background

Use #F0F8FF as a clean, very light blue (almost white) background to ensure maximum readability and an expansive, airy feel.

text

For primary body text on light backgrounds, use #000080 or a deep charcoal (#333333) to ensure excellent readability and a strong, elegant presence.

Accessibility notes

Ensure #00BFFF provides strong contrast against darker blues like #000080 for text or interactive elements.
For body text on #F0F8FF, use #000080 or black to meet WCAG AA/AAA standards easily.
Avoid using #87CEFA for small text on #F0F8FF backgrounds as contrast may be insufficient; reserve for large titles.
Leverage #F0F8FF for backgrounds to maximize readability of all darker elements, especially #000080 and #0000CD.

Recommended combinations

Abyss to Surface

A deep navy base with a crisp light background and a vibrant blue for striking accents or key information.

#000080 · #F0F8FF · #00BFFF

Oceanic Gradient

Create a smooth, dynamic blue gradient for backgrounds, banners, or data visualizations, mimicking ocean depth.

#0000CD · #00BFFF · #87CEFA

Deep Contrast

A very light background with the deepest blue for primary content and a vibrant blue for calls to action.

#F0F8FF · #000080 · #00BFFF

CSS variables

:root {
  --oceanic-abyss-deep-1: #000080;
  --oceanic-abyss-deep-2: #0000CD;
  --oceanic-abyss-deep-3: #00BFFF;
  --oceanic-abyss-deep-4: #87CEFA;
  --oceanic-abyss-deep-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-deep": {
        1: "#000080",
        2: "#0000CD",
        3: "#00BFFF",
        4: "#87CEFA",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000CD

Color 3#00BFFF

Color 4#87CEFA

Color 5#F0F8FF

Accessibility

Contrast checker

1.4:1Fail

7.5:1AAA

9.3:1AAA

14.9:1AAA

1.4:1Fail

5.3:1AA

6.5:1AA

10.4:1AAA

7.5:1AAA

5.3:1AA

1.2:1Fail

2:1Fail

9.3:1AAA

6.5:1AA

1.2:1Fail

1.6:1Fail

14.9:1AAA

10.4:1AAA

2:1Fail

1.6:1Fail

Similar palettes

More like Oceanic Abyss Deep

View all cool

Sapphire Grotto Shimmer