Palette

Stormy Sea Abyss

Captures the dramatic, raw power of the ocean during a tempest, with deep blues and grays.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Sea Abyss 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 Sea Abyss.

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

Data visualization

#2F4F4F#4682B4#6A8CA9#A9BECD#DCE2E7

Palette guide

How to use Stormy Sea Abyss

Overview

The Stormy Sea Abyss palette captures the dramatic, raw power of the ocean during a tempest, with a sophisticated blend of deep blues and grays. Ranging from the profound dark teal of #2F4F4F to the serene, near-white #DCE2E7, this palette offers a compelling gradient. The prominent steel blue #4682B4 and the softer blue-grey #6A8CA9 provide versatile mid-tones, while #A9BECD offers an airy, almost cloud-like quality. Ideal for designers and developers seeking to evoke depth, calm, or a sophisticated natural aesthetic, these hex codes are perfect for creating immersive digital environments, impactful branding, or visual narratives that resonate with tranquility and strength.

Best used for

Deep-sea research organizations
Spa and wellness websites
Environmental advocacy platforms
Luxury home decor branding
Serene meditation apps
Coastal resort marketing

Suggested color roles

primary

Utilize #2F4F4F as the foundational dark color for headers, navigation, or strong brand elements, conveying depth and stability.

secondary

Apply #4682B4 for supporting sections, subheadings, or as a background for content blocks, providing a harmonious mid-tone.

accent

Introduce #6A8CA9 sparingly for interactive elements, hover states, or subtle graphical accents, offering a muted yet distinct highlight.

background

Employ #DCE2E7 for clean, expansive page backgrounds, providing a light, airy canvas that enhances readability.

text

Use a dark text like #2F4F4F for body copy on #DCE2E7 backgrounds for optimal readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

Ensure #2F4F4F text on #DCE2E7 backgrounds meets WCAG AA contrast standards for legibility.
Avoid using #6A8CA9 for small text on #A9BECD, as contrast may be insufficient for accessibility.
Verify that #4682B4 text on #DCE2E7 backgrounds maintains adequate contrast for readability.
All interactive elements should have distinct focus and hover states with sufficient contrast.

Recommended combinations

Abyss Contrast

For a strong base: #2F4F4F for primary, #DCE2E7 for backgrounds, and #4682B4 for key text or elements.

#2F4F4F · #DCE2E7 · #4682B4

Misty Layers

Ideal for layered UI components or subtle gradients, creating depth with soft transitions.

#4682B4 · #6A8CA9 · #A9BECD

Calm Accents

Use #2F4F4F for strong text, #A9BECD for accents/buttons, and #DCE2E7 for clean backgrounds.

#2F4F4F · #A9BECD · #DCE2E7

CSS variables

:root {
  --stormy-sea-abyss-1: #2F4F4F;
  --stormy-sea-abyss-2: #4682B4;
  --stormy-sea-abyss-3: #6A8CA9;
  --stormy-sea-abyss-4: #A9BECD;
  --stormy-sea-abyss-5: #DCE2E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-sea-abyss": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A8CA9",
        4: "#A9BECD",
        5: "#DCE2E7",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#6A8CA9

Color 4#A9BECD

Color 5#DCE2E7

Accessibility

Contrast checker

2.2:1Fail

2.5:1Fail

4.6:1AA

6.8:1AA

2.2:1Fail

1.2:1Fail

2.1:1Fail

3.1:1AA18

2.5:1Fail

1.2:1Fail

1.8:1Fail

2.7:1Fail

4.6:1AA

2.1:1Fail

1.8:1Fail

1.5:1Fail

6.8:1AA

3.1:1AA18

2.7:1Fail

1.5:1Fail

Similar palettes

More like Stormy Sea Abyss

View all dark

Stormy Ocean Fury

Abyssal Trench Mystery

City Puddle Reflection

Deep Ocean Trench

Deep Sea Luminescence

Mariana Trench Enigma