Back to palettes

Palette

Stormy Coastline Drama

Deep greys and blues mirroring a tumultuous sea under a dramatic, overcast sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Coastline Drama 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 Coastline Drama.

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

Data visualization

#4682B4#708090#A9A9A9#696969#2F4F4F

Palette guide

How to use Stormy Coastline Drama

Overview

The Stormy Coastline Drama palette captures the intense beauty of a turbulent sea and an overcast sky. Featuring a striking steel blue, #4682B4, paired with deep charcoal #2F4F4F and varying shades of gray like #708090 and #A9A9A9, this collection is perfect for projects demanding a strong, dramatic, and sophisticated presence. It's ideal for creating interfaces, branding, or digital art that convey power, depth, and a touch of raw natural beauty. The versatility of #696969 allows for excellent textual contrast or subtle background textures.

Best used for

  • Dramatic website themes
  • Luxury brand identity
  • Movie poster or game design
  • Photography and art galleries
  • Corporate reports with a serious tone
  • Fashion or jewelry e-commerce

Suggested color roles

primary

#2F4F4F - A very deep, almost black green-gray, excellent for dominant backgrounds, footers, or bold textual elements, providing significant depth.

secondary

#4682B4 - The vibrant steel blue, perfect for calls-to-action, active states, or key graphical elements that need to stand out.

accent

#A9A9A9 - A lighter gray ideal for subtle highlights, borders, or secondary information, offering a soft contrast.

background

#708090 - A mid-tone slate gray that provides a stable and atmospheric canvas for content, ensuring good readability.

text

#A9A9A9 - For lighter text on dark backgrounds like #2F4F4F or #708090, or use a very dark gray/black for text on #A9A9A9.

Accessibility notes

  • Ensure #A9A9A9 text on #2F4F4F background meets WCAG contrast guidelines for readability.
  • #4682B4 may not have sufficient contrast with #708090 for small text; use carefully.
  • For interactive elements, ensure distinct hover/focus states, perhaps using #A9A9A9.
  • Avoid placing light gray text like #A9A9A9 directly on #696969 without checking contrast.

Recommended combinations

Bold Impact

Powerful trio for main branding, calls-to-action, and subtle highlights, creating strong visual hierarchy.

#2F4F4F · #4682B4 · #A9A9A9

Subdued Depth

Harmonious blend for content areas, sub-sections, and muted details, providing a sophisticated backdrop.

#708090 · #696969 · #A9A9A9

Dramatic Gradient

Creates a sense of depth and movement, excellent for hero sections or visual transitions with a pop of blue.

#2F4F4F · #708090 · #4682B4

CSS variables

:root {
  --stormy-coastline-drama-1: #4682B4;
  --stormy-coastline-drama-2: #708090;
  --stormy-coastline-drama-3: #A9A9A9;
  --stormy-coastline-drama-4: #696969;
  --stormy-coastline-drama-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coastline-drama": {
        1: "#4682B4",
        2: "#708090",
        3: "#A9A9A9",
        4: "#696969",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

dark blue grey palettedramatic ocean colorsmoody brand identitysophisticated dark themesteel blue charcoal colors

Palette colors

Hex values

Color 1#4682B4
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#696969
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.7:1Fail
1.3:1Fail
2.2:1Fail
2
1:1Fail
1.7:1Fail
1.4:1Fail
2.2:1Fail
3
1.7:1Fail
1.7:1Fail
2.3:1Fail
3.8:1AA18
4
1.3:1Fail
1.4:1Fail
2.3:1Fail
1.6:1Fail
5
2.2:1Fail
2.2:1Fail
3.8:1AA18
1.6:1Fail

Similar palettes

More like Stormy Coastline Drama

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