Back to palettes

Palette

Stormy Coast Drift

Captures the dramatic mood of a rugged coastline under a brewing tempest, with deep blues and greys.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Coast Drift 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 Coast Drift.

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

Data visualization

#4682B4#6A5ACD#778899#A9A9A9#2F4F4F

Palette guide

How to use Stormy Coast Drift

Overview

The "Stormy Coast Drift" palette is a captivating collection that evokes the dramatic mood of a rugged coastline under a brewing tempest. It masterfully combines deep, moody blues like #2F4F4F and the striking steel blue of #4682B4 with the unique, muted purple-blue of #6A5ACD, softened by the cool greys #778899 and #A9A9A9. This collection offers designers and developers a rich, complex foundation for creating expressive and atmospheric interfaces or branding. It's ideal for projects seeking to convey depth, mystery, or a connection to nature's powerful, untamed beauty, providing a distinctive and memorable visual identity.

Best used for

  • Adventure sports branding
  • Mysterious game interfaces
  • Art and photography portfolios
  • Luxury menswear design
  • Environmental documentary websites
  • Abstract digital art

Suggested color roles

primary

#2F4F4F provides a very deep, anchoring base, perfect for main backgrounds, headers, or robust structural elements.

secondary

Use #4682B4 for significant content blocks, subheadings, or secondary navigation, introducing a strong, cool blue.

accent

#6A5ACD serves as a unique and striking accent, ideal for interactive elements, calls to action, or key highlights that demand attention.

background

#A9A9A9 can be used for lighter sections or card backgrounds within a darker theme. For a light background, a near-white would be needed.

text

For dark backgrounds, #A9A9A9 or a near-white provides excellent contrast. For lighter elements, #2F4F4F ensures strong readability.

Accessibility notes

  • Ensure sufficient contrast for text. A near-white color for text on #2F4F4F or #4682B4 will be essential.
  • #6A5ACD as text or interactive elements on lighter greys like #A9A9A9 may require careful contrast checking.
  • Avoid using #A9A9A9 for small text on #778899 as contrast will be too low.
  • For interactive elements, ensure distinct visual cues beyond just color if contrast is moderate.

Recommended combinations

Deep Horizon

Combines a dark base with a vibrant blue and a soft grey, perfect for headers or impactful hero sections.

#2F4F4F · #4682B4 · #A9A9A9

Mystic Glow

Creates a subtle, intriguing blend for backgrounds or layered elements, with a unique purple-blue accent.

#778899 · #6A5ACD · #A9A9A9

Rugged Contrast

Use for bold, high-contrast UI, with #2F4F4F as background, #6A5ACD for vibrant actions, and #4682B4 for important text.

#2F4F4F · #6A5ACD · #4682B4

CSS variables

:root {
  --stormy-coast-drift-1: #4682B4;
  --stormy-coast-drift-2: #6A5ACD;
  --stormy-coast-drift-3: #778899;
  --stormy-coast-drift-4: #A9A9A9;
  --stormy-coast-drift-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-drift": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#778899",
        4: "#A9A9A9",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

moody blue grey purplestormy ocean palettedramatic coastal colorsdeep blues and greys designuntamed nature color scheme

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#778899
·
Color 4#A9A9A9
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.1:1Fail
1.7:1Fail
2.2:1Fail
2
1.3:1Fail
1.5:1Fail
2.3:1Fail
1.7:1Fail
3
1.1:1Fail
1.5:1Fail
1.5:1Fail
2.5:1Fail
4
1.7:1Fail
2.3:1Fail
1.5:1Fail
3.8:1AA18
5
2.2:1Fail
1.7:1Fail
2.5:1Fail
3.8:1AA18

Similar palettes

More like Stormy Coast Drift

View all cool
Coastal Tempest Gloom
Stormy Coastal Bluff
Stormy Nordic Coast
Tempest Ocean Fury
Oceanic Storm Surge
Stormy Coast Horizon