Back to palettes

Palette

Stormy Coast Blues

Evokes the raw power and dramatic beauty of a tempestuous ocean under a moody sky.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#485B6C#5F9EA0#697D96#708090#36454F

Palette guide

How to use Stormy Coast Blues

Overview

The "Stormy Coast Blues" palette is a deep and evocative collection that captures the raw power and dramatic beauty of a tempestuous ocean under a moody sky. This collection features rich, cool blues and deep grey-blues, from the profound #36454F and #485B6C to the more vibrant #5F9EA0 and the subtle #697D96 and #708090. Designers and developers can utilize these hues to create powerful, sophisticated, or contemplative interfaces and branding. It's exceptionally well-suited for projects that aim to convey strength, depth, or a connection to nature's formidable aspects, providing a cohesive and impactful visual narrative.

Best used for

  • Marine industry branding
  • Adventure travel websites
  • Environmental non-profit branding
  • Documentary film aesthetics
  • Men's fashion and lifestyle
  • Luxury tech interfaces

Suggested color roles

primary

#36454F serves as a very strong, deep primary, excellent for backgrounds, main headers, or foundational elements, providing an anchor.

secondary

Use #485B6C for secondary sections, large content blocks, or navigation, offering depth without being as stark as the primary.

accent

#5F9EA0 provides a striking, cool blue accent for interactive elements, calls to action, or key highlights that need to pop.

background

#708090 can be used as a lighter, cool background in a dark theme, or for card elements. A very light grey or off-white would be needed for a light background.

text

For dark backgrounds, a very light grey or near-white text is recommended. For lighter elements within the palette, #36454F provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter palette colors on darker ones. Often, a near-white text will be needed.
  • #5F9EA0 might require a very dark background to meet contrast standards for text.
  • Be mindful of using #708090 text on #697D96 or similar; check contrast carefully.
  • For interactive elements, use distinct colors like #5F9EA0 against a darker base.

Recommended combinations

Deep Ocean

Creates a bold, marine-inspired theme with a deep base, a vibrant accent, and a softer mid-tone.

#36454F · #5F9EA0 · #708090

Coastal Mist

Ideal for subtle layering or gradients that evoke a misty, atmospheric quality.

#485B6C · #697D96 · #708090

Dramatic Contrast

Use for high-impact sections, with #36454F as background, #5F9EA0 as a vibrant call to action, and #485B6C for subheadings.

#36454F · #5F9EA0 · #485B6C

CSS variables

:root {
  --stormy-coast-blues-1: #485B6C;
  --stormy-coast-blues-2: #5F9EA0;
  --stormy-coast-blues-3: #697D96;
  --stormy-coast-blues-4: #708090;
  --stormy-coast-blues-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-blues": {
        1: "#485B6C",
        2: "#5F9EA0",
        3: "#697D96",
        4: "#708090",
        5: "#36454F",
      }
    }
  }
}

Related searches

moody blue grey paletteocean storm color schemecool dark blues designcoastal themed colorsdeep sea web palette

Palette colors

Hex values

Color 1#485B6C
·
Color 2#5F9EA0
·
Color 3#697D96
·
Color 4#708090
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
1.7:1Fail
1.7:1Fail
1.4:1Fail
2
2.3:1Fail
1.4:1Fail
1.3:1Fail
3.2:1AA18
3
1.7:1Fail
1.4:1Fail
1:1Fail
2.3:1Fail
4
1.7:1Fail
1.3:1Fail
1:1Fail
2.4:1Fail
5
1.4:1Fail
3.2:1AA18
2.3:1Fail
2.4:1Fail

Similar palettes

More like Stormy Coast Blues

View all cool
Stormy Coast Lighthouse
Bioluminescent Abyss
Coastal Tempest Gloom
Cobalt Abyss Depths
Cobalt Arctic Depth
Deep Sea Hydrothermal