Palette

Stormy Seafoam Weather

A muted, stormy palette reflecting misty coastal weather and deep sea grays.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#A9A9A9#B0C4DE#D3D3D3

Palette guide

How to use Stormy Seafoam Weather

Overview

The Stormy Seafoam Weather palette presents a muted, tranquil, yet atmospheric collection, reflecting misty coastal weather and deep sea grays. Ranging from the profound dark teal of #2F4F4F to the airy light gray of #D3D3D3, this palette offers a harmonious gradient of cool tones. Key colors like the steel gray #708090 and the soft medium gray #A9A9A9 provide versatile mid-tones, while #B0C4DE introduces a delicate blue hint, reminiscent of distant skies. Ideal for designers and developers seeking a serene, sophisticated, and understated aesthetic, these hex codes are perfect for creating calming digital environments, refined branding, or visual narratives that evoke quiet contemplation and natural beauty.

Best used for

Weather forecasting apps
Minimalist website designs
Photography portfolios (especially landscape)
Eco-friendly brand packaging
Wellness and meditation content
Urban architecture showcases

Suggested color roles

primary

Utilize #2F4F4F as the foundational dark color for headers, navigation, or strong brand elements, conveying depth and stability.

secondary

Apply #708090 for supporting sections, subheadings, or as a background for content blocks, providing a harmonious mid-tone.

accent

Introduce #B0C4DE sparingly for interactive elements, subtle highlights, or graphical accents, offering a delicate blue visual cue.

background

Employ #D3D3D3 for clean, expansive page backgrounds, providing a light, neutral canvas that enhances readability.

text

Use a dark text like #2F4F4F for body copy on #D3D3D3 backgrounds for optimal readability. For darker backgrounds, a crisp white or near-white is recommended.

Accessibility notes

Ensure #2F4F4F text on #D3D3D3 backgrounds meets WCAG AA contrast standards for legibility.
Avoid using #A9A9A9 for small text on #B0C4DE, as contrast may be insufficient for accessibility.
Verify that #708090 text on #D3D3D3 backgrounds maintains adequate contrast for readability.
All interactive elements should have distinct focus and hover states with sufficient contrast.

Recommended combinations

Misty Contrast

For a balanced base: #2F4F4F for primary, #D3D3D3 for backgrounds, and #708090 for text/secondary elements.

#2F4F4F · #D3D3D3 · #708090

Subtle Blue

Ideal for layered UI components or subtle gradients, incorporating a hint of blue amidst grays.

#708090 · #A9A9A9 · #B0C4DE

Light Accents

Use #2F4F4F for strong text, #B0C4DE for gentle accents, and #D3D3D3 for clean backgrounds.

#2F4F4F · #B0C4DE · #D3D3D3

CSS variables

:root {
  --stormy-seafoam-weather-1: #2F4F4F;
  --stormy-seafoam-weather-2: #708090;
  --stormy-seafoam-weather-3: #A9A9A9;
  --stormy-seafoam-weather-4: #B0C4DE;
  --stormy-seafoam-weather-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-seafoam-weather": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#B0C4DE

Color 5#D3D3D3

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

5:1AA

6:1AA

2.2:1Fail

1.7:1Fail

2.3:1Fail

2.7:1Fail

3.8:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

5:1AA

2.3:1Fail

1.3:1Fail

1.2:1Fail

6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Stormy Seafoam Weather

View all cool

Oceanic Stormy Horizon

Coastal Morning Haze

Aegean Coastline Calm

Aegean Horizon

Aegean Sea Serene

Agate Grotto