Back to palettes

Palette

Stormy Coast Grey

Reflects the brooding beauty of a stormy seaside, with layers of deep to light muted grays.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F363F#57606F#88909D#C0C5CE#EFEFEF

Palette guide

How to use Stormy Coast Grey

Overview

The "Stormy Coast Grey" palette is a refined monochrome collection that perfectly reflects the brooding beauty of a stormy seaside, offering a sophisticated spectrum of deep to light muted greys. Ranging from the profound #2F363F to the crisp #EFEFEF, with balanced mid-tones like #57606F, #88909D, and #C0C5CE, this palette provides immense depth and versatility. Designers and developers can leverage these hues to create minimalist, elegant, or robust interfaces and branding. It's especially effective for projects requiring a calm yet powerful presence, ensuring a cohesive, professional, and timeless aesthetic across various digital and print applications.

Best used for

  • Minimalist web design
  • High-tech product interfaces
  • Architectural portfolios
  • Luxury brand identity
  • Data visualization dashboards
  • Corporate annual reports

Suggested color roles

primary

#2F363F serves as a very deep, anchoring primary color, excellent for backgrounds, main headers, or foundational structural elements.

secondary

Use #57606F for secondary navigation, card backgrounds in a dark theme, or prominent content blocks, offering a slightly lighter depth.

accent

#88909D works well for interactive elements, icons, or subtle highlights that need to stand out gently against darker tones.

background

#EFEFEF provides a clean, bright background for standard interfaces, offering excellent contrast for darker text.

text

For light backgrounds, #2F363F or #57606F ensures strong readability. For dark backgrounds, #EFEFEF provides clear, contrasting text.

Accessibility notes

  • Ensure #2F363F text on #EFEFEF background meets WCAG AAA contrast.
  • #C0C5CE on #EFEFEF may not be sufficient for small text; use for large headings or accents.
  • For interactive elements, ensure sufficient contrast against their background, e.g., #57606F buttons on #EFEFEF.
  • Text in #EFEFEF on #2F363F background offers excellent readability.

Recommended combinations

Deep Minimal

Ideal for a dark UI, with #2F363F as base, #EFEFEF for text, and #57606F for secondary elements.

#2F363F · #EFEFEF · #57606F

Light Clarity

Creates a clean, light interface with #EFEFEF as background, #2F363F for text, and #88909D for accents.

#EFEFEF · #2F363F · #88909D

Gradient Depth

Use for subtle background gradients or layered components to add visual depth in a mid-tone range.

#57606F · #88909D · #C0C5CE

CSS variables

:root {
  --stormy-coast-grey-1: #2F363F;
  --stormy-coast-grey-2: #57606F;
  --stormy-coast-grey-3: #88909D;
  --stormy-coast-grey-4: #C0C5CE;
  --stormy-coast-grey-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-coast-grey": {
        1: "#2F363F",
        2: "#57606F",
        3: "#88909D",
        4: "#C0C5CE",
        5: "#EFEFEF",
      }
    }
  }
}

Related searches

monochrome grey palettestormy coastal greyminimalist cool greydeep grey color schemeelegant neutral UI colors

Palette colors

Hex values

Color 1#2F363F
·
Color 2#57606F
·
Color 3#88909D
·
Color 4#C0C5CE
·
Color 5#EFEFEF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.8:1AA18
7:1AAA
10.6:1AAA
2
1.9:1Fail
2:1Fail
3.7:1AA18
5.5:1AA
3
3.8:1AA18
2:1Fail
1.9:1Fail
2.8:1Fail
4
7:1AAA
3.7:1AA18
1.9:1Fail
1.5:1Fail
5
10.6:1AAA
5.5:1AA
2.8:1Fail
1.5:1Fail

Similar palettes

More like Stormy Coast Grey

View all monochrome
Arctic Explorer Suit
Arctic Whispers Snow
Basalt Stream Pebble
Frosty Serene
Granite Peak Twilight
Ink Wash Serenity