Back to palettes

Palette

Stormy Ocean Depths

Deep, brooding blues and grays, mirroring the turbulent and mysterious ocean.

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

#000080#4682B4#6A5ACD#708090#191970

Palette guide

How to use Stormy Ocean Depths

Overview

The Stormy Ocean Depths palette plunges into the profound and mysterious blues and grays of a turbulent sea, offering a dramatic and sophisticated aesthetic. Dominated by the deep navy of #000080 and the slightly lighter yet equally potent #191970, this palette is balanced by the steel blue #4682B4 and the intriguing slate blue-grey #708090. A striking accent is provided by #6A5ACD, a rich medium purple-blue that adds a touch of complexity. This collection is ideal for projects requiring a sense of depth, power, or understated elegance. Designers and developers can utilize these hex codes to craft immersive digital experiences, impactful branding, or compelling visual narratives that resonate with a mature audience.

Best used for

  • High-end technology interfaces
  • Mysterious game environments
  • Luxury men's fashion branding
  • Financial services websites
  • Space exploration themed content
  • Abstract art portfolios

Suggested color roles

primary

Utilize #000080 as the foundational dark blue, perfect for hero sections, navigation bars, or as a strong brand identifier.

secondary

Apply #4682B4 for sub-headers, background panels, or large content blocks, offering a slightly lighter yet cohesive tone.

accent

Introduce #6A5ACD sparingly for interactive elements, highlights, or graphical accents to provide a sophisticated pop of color.

background

Use #708090 for subtle, textured backgrounds or as a base for secondary information, providing a muted, calming canvas.

text

Employ #191970 for dark, readable body text on light backgrounds. For dark backgrounds like #000080, a bright white or very light grey is essential for contrast.

Accessibility notes

  • Ensure sufficient contrast for white text on #000080 and #191970 backgrounds to meet WCAG AA standards.
  • Avoid placing #708090 text directly on #4682B4 backgrounds due to potential low contrast.
  • Use #6A5ACD for larger text or interactive elements only if contrast with its background is robust.
  • Prioritize high contrast for all critical information, especially against the darker shades in this palette.

Recommended combinations

Deep Core

Excellent for a moody primary scheme: #000080 for main sections, #708090 for text/details, and #191970 for strong accents or dark text.

#000080 · #708090 · #191970

Vivid Contrast

Use #4682B4 for main content, #6A5ACD as a striking accent, and #708090 for supporting backgrounds or subtle text.

#4682B4 · #6A5ACD · #708090

Subtle Layers

Ideal for layered UI components, with #191970 as a base, #4682B4 for content, and #708090 for delicate details.

#191970 · #4682B4 · #708090

CSS variables

:root {
  --stormy-ocean-depths-2-1: #000080;
  --stormy-ocean-depths-2-2: #4682B4;
  --stormy-ocean-depths-2-3: #6A5ACD;
  --stormy-ocean-depths-2-4: #708090;
  --stormy-ocean-depths-2-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-ocean-depths-2": {
        1: "#000080",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#708090",
        5: "#191970",
      }
    }
  }
}

Related searches

deep ocean color palettedark stormy blue schememysterious color combinationsnavy and steel blue designelegant dark blue grey

Palette colors

Hex values

Color 1#000080
·
Color 2#4682B4
·
Color 3#6A5ACD
·
Color 4#708090
·
Color 5#191970
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.9:1AA18
3:1AA18
3.9:1AA18
1.1:1Fail
2
3.9:1AA18
1.3:1Fail
1:1Fail
3.6:1AA18
3
3:1AA18
1.3:1Fail
1.3:1Fail
2.8:1Fail
4
3.9:1AA18
1:1Fail
1.3:1Fail
3.7:1AA18
5
1.1:1Fail
3.6:1AA18
2.8:1Fail
3.7:1AA18

Similar palettes

More like Stormy Ocean Depths

View all dark
Oceanic Abyss Gale
Deep Ocean Caverns
Deep Sea Fathoms
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow