Back to palettes

Palette

Ocean Depths

Progressively darker blues reflecting the immense, mysterious depths of the ocean.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1C2C#1B3A4B#2C576C#3D758C#4E92AD

Palette guide

How to use Ocean Depths

Overview

The Ocean Depths palette offers a sophisticated range of progressively darker blues, perfectly capturing the immense and mysterious nature of the deep sea. Starting with the profound #0A1C2C (Very Dark Blue) and moving through #1B3A4B (Dark Cerulean), #2C576C (Steel Blue), #3D758C (Cadet Blue), to the lighter #4E92AD (Ocean Blue), this gradient provides excellent depth and versatility. It's ideal for designers and developers seeking to create a serious, calm, or introspective mood. This palette excels in applications where a sense of professionalism, tranquility, and understated elegance is desired, making it a strong choice for corporate, educational, or thematic digital environments.

Best used for

  • Corporate websites with a serious tone
  • Educational platforms for science or history
  • Luxury product packaging
  • UI for professional tools or analytics dashboards
  • Mobile apps focused on meditation or sleep
  • Branding for environmental non-profits

Suggested color roles

primary

Establish a strong, deep presence with #0A1C2C for main backgrounds or corporate branding.

secondary

Use #1B3A4B or #2C576C for navigation, section dividers, or secondary graphical elements.

accent

#4E92AD serves as a gentle accent for interactive elements or to draw attention without being overly bold.

background

#0A1C2C or #1B3A4B provides a rich, dark backdrop, while #2C576C can be used for lighter sections.

text

White or a very light gray is recommended for text on darker shades like #0A1C2C. For #4E92AD, a dark charcoal text would work.

Accessibility notes

  • Ensure high contrast for text on backgrounds; white or light gray is essential for #0A1C2C and #1B3A4B.
  • #3D758C and #4E92AD might require darker text, such as black or dark charcoal, to meet accessibility standards.
  • Avoid using #3D758C or #4E92AD for small text on similarly muted backgrounds without testing.
  • Provide sufficient visual cues for interactive elements, as the palette's gradients are subtle.

Recommended combinations

Deep Gradient

Excellent for background gradients, creating a sense of natural depth and progression.

#0A1C2C · #2C576C · #4E92AD

Contrast & Clarity

Ideal for primary content areas, using the lightest blue for highlights or interactive elements against the darkest.

#0A1C2C · #4E92AD · #1B3A4B

Subdued Harmony

Perfect for secondary navigation, subtle data visualizations, or visual components requiring a calm blend.

#1B3A4B · #3D758C · #2C576C

CSS variables

:root {
  --ocean-depths-1: #0A1C2C;
  --ocean-depths-2: #1B3A4B;
  --ocean-depths-3: #2C576C;
  --ocean-depths-4: #3D758C;
  --ocean-depths-5: #4E92AD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths": {
        1: "#0A1C2C",
        2: "#1B3A4B",
        3: "#2C576C",
        4: "#3D758C",
        5: "#4E92AD",
      }
    }
  }
}

Related searches

dark blue gradient paletteprofessional blue color schemedeep ocean UI colorscalm corporate brandingmysterious blue web design

Palette colors

Hex values

Color 1#0A1C2C
·
Color 2#1B3A4B
·
Color 3#2C576C
·
Color 4#3D758C
·
Color 5#4E92AD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.4:1AA18
5:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
3.4:1AA18
3
2.2:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3.4:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5:1AA
3.4:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Ocean Depths

View all dark
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Celestial Abyss Gaze
Cosmic Abyss Echo
Deep Fathom Mystery