Back to palettes

Palette

Stormy Beach Day

A soothing, cool palette capturing the serene beauty of a peaceful, overcast day at the beach.

MonochromeCalm5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#A9A9A9#D3D3D3#ADD8E6

Palette guide

How to use Stormy Beach Day

Overview

The "Stormy Beach Day" palette beautifully captures the serene yet powerful essence of an overcast day by the ocean. It blends deep, muted blue-greys like #2F4F4F and #708090 with softer, mist-like greys such as #A9A9A9 and #D3D3D3, culminating in the subtle, cool blue of #ADD8E6. This palette provides designers and developers with a tranquil yet sophisticated foundation. It’s perfect for creating calm, reflective, or subtly melancholic interfaces and branding, offering a cohesive and comforting aesthetic that evokes natural beauty and a peaceful atmosphere.

Best used for

  • Wellness and meditation apps
  • Coastal resort branding
  • Eco-friendly product packaging
  • Nature photography websites
  • Spa and beauty salon branding
  • Calm editorial layouts

Suggested color roles

primary

#2F4F4F provides a deep, grounding base, excellent for headers, footers, or dark background sections, evoking depth.

secondary

#708090 works well for subheadings, navigation elements, or secondary content blocks, offering a slightly lighter, cool grey.

accent

#ADD8E6 serves as a gentle, refreshing accent, perfect for highlights, interactive elements, or subtle calls to action.

background

#D3D3D3 offers a light, airy background, creating a sense of calm and openness.

text

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

Accessibility notes

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

Recommended combinations

Serene Horizon

Ideal for a calm header or footer with a light background and a soft blue accent.

#2F4F4F · #D3D3D3 · #ADD8E6

Misty Gradient

Perfect for subtle background gradients or layered UI components in a light theme.

#708090 · #A9A9A9 · #D3D3D3

Coastal Calm

Use #D3D3D3 as a clean background, #2F4F4F for strong text, and #ADD8E6 for gentle highlights.

#D3D3D3 · #2F4F4F · #ADD8E6

CSS variables

:root {
  --stormy-beach-day-1: #2F4F4F;
  --stormy-beach-day-2: #708090;
  --stormy-beach-day-3: #A9A9A9;
  --stormy-beach-day-4: #D3D3D3;
  --stormy-beach-day-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-beach-day": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

calm grey blue palettestormy ocean colorsserene beach color schememuted cool tones designmonochromatic blue grey palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#A9A9A9
·
Color 4#D3D3D3
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
6:1AA
5.8:1AA
2
2.2:1Fail
1.7:1Fail
2.7:1Fail
2.7:1Fail
3
3.8:1AA18
1.7:1Fail
1.6:1Fail
1.5:1Fail
4
6:1AA
2.7:1Fail
1.6:1Fail
1:1Fail
5
5.8:1AA
2.7:1Fail
1.5:1Fail
1:1Fail

Similar palettes

More like Stormy Beach Day

View all Monochrome
Gentle Stream Pebbles
Monochrome Ocean Depths
Ember Ash Hearth
Winter Woodland Calm
Zen River Pebble
Cherry Blossom Dew