Palette

Stormy Coastline

Captures the dramatic, raw power and brooding atmosphere of a wild coastline during a storm.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A4F60#36454F#F8F8F8#465A5B#5A625A

Palette guide

How to use Stormy Coastline

Overview

The Stormy Coastline palette encapsulates the raw, brooding atmosphere of a wild shore during a storm. It features a rich, near-white #F8F8F8 balanced by deep, earthy grays and blues like #36454F and #4A4F60. The inclusion of subtle green-grays such as #465A5B and #5A625A adds organic depth, reminiscent of damp rocks and sea moss. This palette is excellent for designers seeking a natural, dramatic, yet refined aesthetic, perfect for crafting compelling user interfaces, impactful branding, or evocative digital illustrations.

Best used for

Outdoor and adventure brands
Eco-conscious product packaging
Documentary film titles
Web design for nature blogs
Photography portfolio sites
Architectural interior design

Suggested color roles

primary

#36454F - A deep, grounding charcoal-blue, ideal for main backgrounds, navigation, or strong typography.

secondary

#4A4F60 - A slightly lighter, more muted blue-gray, excellent for secondary panels, cards, or supporting text.

accent

#F8F8F8 - A crisp, near-white for clean text, highlights, or background sections that need to pop against dark tones.

background

#F8F8F8 - A bright, clean canvas that allows the darker, moodier colors to stand out prominently.

text

#36454F - For primary body text on light backgrounds like #F8F8F8, ensuring excellent readability. For dark backgrounds, use #F8F8F8.

Accessibility notes

#36454F text on #F8F8F8 background offers excellent contrast for all content.
Ensure #4A4F60 text on #F8F8F8 also meets WCAG AA for smaller text.
The dark green-grays like #465A5B and #5A625A provide good contrast with #F8F8F8.
For dark mode, use #F8F8F8 for text on the darker palette colors.

Recommended combinations

Bold Readability

Classic high-contrast pairing for text and backgrounds, with the blue-gray for supporting elements.

#36454F · #F8F8F8 · #4A4F60

Organic Depth

Subtle, natural blend for textural elements, sidebars, or illustrations, with near-white for clarity.

#465A5B · #5A625A · #F8F8F8

Dramatic Interface

Robust set for a dark-themed UI, using #F8F8F8 for critical information and calls to action.

#4A4F60 · #36454F · #F8F8F8

CSS variables

:root {
  --stormy-coastline-1: #4A4F60;
  --stormy-coastline-2: #36454F;
  --stormy-coastline-3: #F8F8F8;
  --stormy-coastline-4: #465A5B;
  --stormy-coastline-5: #5A625A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coastline": {
        1: "#4A4F60",
        2: "#36454F",
        3: "#F8F8F8",
        4: "#465A5B",
        5: "#5A625A",
      }
    }
  }
}

Hex values

Color 1#4A4F60

Color 2#36454F

Color 3#F8F8F8

Color 4#465A5B

Color 5#5A625A

Accessibility

Contrast checker

1.2:1Fail

7.7:1AAA

1.1:1Fail

1.3:1Fail

1.2:1Fail

9.3:1AAA

1.4:1Fail

1.6:1Fail

7.7:1AAA

9.3:1AAA

6.9:1AA

5.9:1AA

1.1:1Fail

1.4:1Fail

6.9:1AA

1.2:1Fail

1.3:1Fail

1.6:1Fail

5.9:1AA

1.2:1Fail

Similar palettes

More like Stormy Coastline

Stormy Coastline

See it in context.

Ready when you are.

Built with Stormy Coastline.

How to use Stormy Coastline

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Bold Readability

Organic Depth

Dramatic Interface

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Stormy Coastline