Back to palettes

Palette

Oceanic Depths

A profound journey through varying shades of blue, from vibrant deep-sea to almost-black abyss, capturing oceanic mystery.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00008B#0000CD#0000EE#4682B4#191970

Palette guide

How to use Oceanic Depths

Overview

The Oceanic Depths palette takes you on a profound journey through varying shades of blue, capturing oceanic mystery. From the vibrant deep-sea #00008B and #0000CD to the more subdued #0000EE, #4682B4 (Steel Blue), and the almost-black abyss of #191970 (Midnight Blue), this palette is rich with possibilities. Designers and developers can utilize these hues to create immersive, sophisticated, and trustworthy digital environments. Its range allows for excellent visual hierarchy, making it perfect for conveying depth, stability, and a touch of enigmatic elegance. This palette excels in projects that require a serious yet captivating aesthetic, reflecting the quiet power of the ocean.

Best used for

  • Maritime industry websites
  • Financial reporting dashboards
  • Educational content about oceans
  • Luxury brand digital experiences
  • Professional corporate presentations
  • Dark mode application themes

Suggested color roles

primary

Use #00008B (Dark Blue) for core elements, providing a strong, dependable foundation.

secondary

Apply #0000CD (Medium Blue) to secondary content or navigation, offering a slightly lighter yet impactful blue.

accent

Employ #0000EE (Blue) for vibrant calls to action, alerts, or key interactive elements to stand out.

background

Utilize #191970 (Midnight Blue) for a deep, sophisticated background that creates an immersive user experience.

text

For optimal readability, use white or a very light gray like #F0F0F0 for text against the darker blues. A dark charcoal works on #4682B4.

Accessibility notes

  • Always pair dark blues with white or very light text to ensure sufficient contrast for readability.
  • Avoid using two dark blues for text and background without careful contrast checking.
  • Ensure interactive elements provide clear visual feedback beyond color, especially for users with color vision deficiencies.
  • The lighter #4682B4 can be used as a background for dark text, offering good legibility.

Recommended combinations

Deep Dive

Ideal for creating layered backgrounds or sections that convey depth and professionalism.

#191970 · #00008B · #0000CD

Ocean Glow

Excellent for highlighting key information, interactive elements, or a refreshing contrast.

#0000EE · #4682B4 · #00008B

Abyss Anchor

Provides a strong, stable base with a bright, eye-catching accent for important calls to action.

#191970 · #0000CD · #0000EE

CSS variables

:root {
  --oceanic-depths-1: #00008B;
  --oceanic-depths-2: #0000CD;
  --oceanic-depths-3: #0000EE;
  --oceanic-depths-4: #4682B4;
  --oceanic-depths-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-depths": {
        1: "#00008B",
        2: "#0000CD",
        3: "#0000EE",
        4: "#4682B4",
        5: "#191970",
      }
    }
  }
}

Related searches

deep blue color gradientsnavy ocean palettedark blue UI designmysterious water colorsprofessional blue aesthetic

Palette colors

Hex values

Color 1#00008B
·
Color 2#0000CD
·
Color 3#0000EE
·
Color 4#4682B4
·
Color 5#191970
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
3.7:1AA18
1:1Fail
2
1.4:1Fail
1.2:1Fail
2.7:1Fail
1.3:1Fail
3
1.6:1Fail
1.2:1Fail
2.3:1Fail
1.6:1Fail
4
3.7:1AA18
2.7:1Fail
2.3:1Fail
3.6:1AA18
5
1:1Fail
1.3:1Fail
1.6:1Fail
3.6:1AA18

Similar palettes

More like Oceanic Depths

View all dark
Abyssal Midnight Reef
Abyssal Trench Mystery
Celestial Ocean Depth
Deep Abyss Current
Deep Cobalt Plunge
Deep Ocean Abyss