Back to palettes

Palette

Stormy Ocean Depths

Reflects the turbulent, moody grays and deep blues of a powerful ocean under a stormy sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A8D9F#4C6B7B#2E4957#1E3A44#0D252E

Palette guide

How to use Stormy Ocean Depths

Overview

The Stormy Ocean Depths palette captures the formidable essence of a turbulent ocean, presenting a range of deep, moody blues and grays. From the dark, almost black hue of #0D252E to the slightly lighter, serene #6A8D9F, this palette offers a rich gradient of cool tones. Key colors like #2E4957 and #1E3A44 provide substantial depth, while #4C6B7B acts as a harmonious mid-tone, bridging the lighter and darker shades. This collection is perfect for designers and developers aiming to evoke a sense of power, mystery, or sophisticated drama. It's particularly effective for creating immersive digital environments, impactful branding, or visual content that requires a strong, contemplative mood.

Best used for

  • Luxury yachting brands
  • Cybersecurity firm interfaces
  • Dark mode UI designs
  • High-end automotive advertising
  • Underwater exploration documentaries
  • Abstract digital art

Suggested color roles

primary

Establish #0D252E as the foundational dark color for backgrounds or primary branding elements, conveying ultimate depth and sophistication.

secondary

Apply #2E4957 for supporting sections, large text blocks, or as a contrasting dark background for specific content areas.

accent

Use #6A8D9F sparingly for interactive elements, hover states, or subtle graphical accents to provide a muted yet noticeable highlight.

background

Utilize #1E3A44 for a deep, atmospheric background that allows lighter elements to stand out, or #4C6B7B for a slightly less intense base.

text

For optimal readability on darker backgrounds, use a crisp white or very light grey. For accents or subheadings on lighter shades like #6A8D9F, #0D252E provides excellent contrast.

Accessibility notes

  • Ensure white or very light grey text has sufficient contrast against #0D252E, #1E3A44, and #2E4957.
  • Avoid using #4C6B7B text on #6A8D9F backgrounds, as the contrast may be too low for accessibility.
  • All interactive elements should have distinct focus and hover states with adequate contrast.
  • Test all text sizes and weights to guarantee legibility, especially for smaller fonts.

Recommended combinations

Deep Foundation

For a strong, dark base: #0D252E for backgrounds, #6A8D9F for primary elements, and #1E3A44 for text or secondary blocks.

#0D252E · #6A8D9F · #1E3A44

Moody Layers

Ideal for layered UI, with #2E4957 as a base, #4C6B7B for content, and #6A8D9F for highlights.

#2E4957 · #4C6B7B · #6A8D9F

Subtle Gradient

Effective for creating subtle depth and transitions in backgrounds or large graphic elements.

#0D252E · #1E3A44 · #2E4957

CSS variables

:root {
  --stormy-ocean-depths-1: #6A8D9F;
  --stormy-ocean-depths-2: #4C6B7B;
  --stormy-ocean-depths-3: #2E4957;
  --stormy-ocean-depths-4: #1E3A44;
  --stormy-ocean-depths-5: #0D252E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-ocean-depths": {
        1: "#6A8D9F",
        2: "#4C6B7B",
        3: "#2E4957",
        4: "#1E3A44",
        5: "#0D252E",
      }
    }
  }
}

Related searches

deep stormy blue palettemoody ocean colors webdark aquatic color schemesophisticated deep blue greygloomy marine design

Palette colors

Hex values

Color 1#6A8D9F
·
Color 2#4C6B7B
·
Color 3#2E4957
·
Color 4#1E3A44
·
Color 5#0D252E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
3.4:1AA18
4.5:1AA18
2
1.6:1Fail
1.7:1Fail
2.1:1Fail
2.8:1Fail
3
2.7:1Fail
1.7:1Fail
1.3:1Fail
1.7:1Fail
4
3.4:1AA18
2.1:1Fail
1.3:1Fail
1.3:1Fail
5
4.5:1AA18
2.8:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Stormy Ocean Depths

View all dark
Abyss Gaze
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Forms
Abyssal Coral Glow
Abyssal Depths