Back to palettes

Palette

Deep Ocean Ridge

An abyss of blues, from darkest navy to profound aquamarine, portraying the silent, immense deep-sea ridges.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A2A4A#1F4E7A#4C7FB2#071D33#041426

Palette guide

How to use Deep Ocean Ridge

Overview

The Deep Ocean Ridge palette submerges your designs into the tranquil yet profound depths of the sea. Featuring a spectrum of blues from the near-black abyss of #041426 and the commanding navy of #071D33 to the rich, foundational #0A2A4A, it evokes mystery, professionalism, and calm. The palette is balanced by the supportive mid-tone #1F4E7A and the striking, lighter blue of #4C7FB2, which offers a refreshing contrast. Ideal for projects demanding a sophisticated, immersive, and serene aesthetic, this collection of deep blues is perfect for creating impactful digital experiences and elegant branding that resonates with depth and authority.

Best used for

  • Corporate or tech branding seeking a serious, reliable tone
  • Marine industry websites, apps, or educational materials
  • Sophisticated night mode interfaces and dark themes
  • Luxury product packaging or high-end digital marketing
  • Digital art or illustrations depicting deep-sea environments
  • Environmental or conservation-focused organizations

Suggested color roles

primary

Use #0A2A4A as the dominant brand color or main UI element, embodying stability and depth.

secondary

Apply #1F4E7A for supporting elements like navigation bars, secondary sections, or background panels.

accent

Reserve #4C7FB2 for calls to action, interactive elements, or key data points to provide a clear, refreshing highlight.

background

Employ #041426 or #071D33 for immersive, dark backgrounds, providing a sense of endless depth and elegance.

text

For optimal readability, use pure white (#FFFFFF) or a very light gray (#E0E0E0) against the dark background and primary colors.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter text (e.g., #FFFFFF) with very dark blues like #041426 and #071D33.
  • The lighter blue #4C7FB2 provides good contrast against the darkest shades, making it suitable for larger text or key elements.
  • Avoid using #0A2A4A or #1F4E7A for small body text against similar dark backgrounds without proper contrast testing.
  • Always test color combinations with accessibility tools to meet WCAG guidelines, especially for interactive components.

Recommended combinations

Deep Abyss Contrast

Ideal for strong visual impact; use the darkest blue for backgrounds, the lightest for accents, and the primary for headers.

#041426 · #4C7FB2 · #0A2A4A

Subtle Marine Gradient

Perfect for creating depth in UI elements, data visualizations, or elegant background gradients that feel seamless.

#0A2A4A · #1F4E7A · #071D33

Oceanic Highlight

Use the very dark blue as a base, with the lightest blue for features, and the medium blue for supporting details or illustrations.

#071D33 · #4C7FB2 · #1F4E7A

CSS variables

:root {
  --deep-ocean-ridge-1: #0A2A4A;
  --deep-ocean-ridge-2: #1F4E7A;
  --deep-ocean-ridge-3: #4C7FB2;
  --deep-ocean-ridge-4: #071D33;
  --deep-ocean-ridge-5: #041426;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-ridge": {
        1: "#0A2A4A",
        2: "#1F4E7A",
        3: "#4C7FB2",
        4: "#071D33",
        5: "#041426",
      }
    }
  }
}

Related searches

deep blue color palettedark ocean colorsmarine design palettenavy blue branding colorsmysterious blue theme

Palette colors

Hex values

Color 1#0A2A4A
·
Color 2#1F4E7A
·
Color 3#4C7FB2
·
Color 4#071D33
·
Color 5#041426
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.5:1AA18
1.2:1Fail
1.3:1Fail
2
1.7:1Fail
2.1:1Fail
2:1Fail
2.1:1Fail
3
3.5:1AA18
2.1:1Fail
4:1AA18
4.4:1AA18
4
1.2:1Fail
2:1Fail
4:1AA18
1.1:1Fail
5
1.3:1Fail
2.1:1Fail
4.4:1AA18
1.1:1Fail

Similar palettes

More like Deep Ocean Ridge

View all dark
Deep Ocean Abyss
Deep Ocean Glimmer
Deep Ocean Mariana
Deep Ocean Trench
Abyss Gaze
Abyss Glow Deep