Back to palettes

Palette

Stormy Coast Horizon

Moody blues and stormy greys capture the wild, untamed beauty of a dramatic coastal landscape.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#A9A9A9#B0C4DE#DCDCDC

Palette guide

How to use Stormy Coast Horizon

Overview

The "Stormy Coast Horizon" palette is a deeply evocative collection that captures the wild, untamed beauty of a dramatic coastal landscape with its moody blues and stormy greys. It transitions from the profound depth of #2F4F4F and the cool elegance of #708090, through the balanced neutral #A9A9A9, to the soft, ethereal #B0C4DE and the crisp brightness of #DCDCDC. Designers and developers can utilize this palette to create powerful, sophisticated, or contemplative interfaces and branding. It's exceptionally well-suited for projects aiming to convey strength, natural beauty, or a sense of serene drama, providing a cohesive and impactful visual narrative.

Best used for

  • Outdoor adventure brands
  • Nature documentary websites
  • Coastal tourism promotions
  • Environmental non-profit organizations
  • Serene digital art applications
  • Modern editorial layouts

Suggested color roles

primary

#2F4F4F serves as a powerful, anchoring primary color, excellent for main backgrounds, headers, or foundational structural elements.

secondary

Use #708090 for secondary sections, large content blocks, or navigation, offering a slightly lighter, cool grey-blue.

accent

#B0C4DE provides a soft yet distinct cool blue accent, perfect for highlights, interactive elements, or subtle calls to action.

background

#DCDCDC offers a clean, bright background, providing excellent contrast for darker text and an expansive feel.

text

For light backgrounds, #2F4F4F or #708090 ensures strong readability. For dark backgrounds, #DCDCDC or #A9A9A9 provides clear, contrasting text.

Accessibility notes

  • Ensure #2F4F4F text on #DCDCDC background meets WCAG AAA contrast.
  • #A9A9A9 on #DCDCDC may not be sufficient for small text; use for large headings or accents.
  • #B0C4DE as text color will likely require a very dark background for readability.
  • For interactive elements, ensure sufficient contrast, e.g., #708090 buttons on #DCDCDC.

Recommended combinations

Dramatic Sky

Ideal for a dark base with a clean light background and a soft, ethereal blue accent for hero sections.

#2F4F4F · #DCDCDC · #B0C4DE

Misty Depths

Perfect for creating subtle, atmospheric gradients or layered UI elements, reminiscent of a misty horizon.

#708090 · #A9A9A9 · #B0C4DE

Coastal Serenity

Use #DCDCDC as a clean background, #2F4F4F for strong text, and #708090 for secondary elements.

#DCDCDC · #2F4F4F · #708090

CSS variables

:root {
  --stormy-coast-horizon-1: #2F4F4F;
  --stormy-coast-horizon-2: #708090;
  --stormy-coast-horizon-3: #A9A9A9;
  --stormy-coast-horizon-4: #B0C4DE;
  --stormy-coast-horizon-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-horizon": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

stormy blue grey palettecoastal horizon colorsmoody ocean color schemecool dark nature palettedramatic landscape design colors

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#B0C4DE
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
5:1AA
6.5:1AA
2
2.2:1Fail
1.7:1Fail
2.3:1Fail
3:1Fail
3
3.8:1AA18
1.7:1Fail
1.3:1Fail
1.7:1Fail
4
5:1AA
2.3:1Fail
1.3:1Fail
1.3:1Fail
5
6.5:1AA
3:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Stormy Coast Horizon

View all cool
Tempest Sea Depths
Bioluminescent Abyss
Coastal Tempest Gloom
Cobalt Abyss Depths
Midnight Ocean Trench
Stormy Coast Drift