Back to palettes

Palette

Stormy Horizon Gray

Cool, muted grays and blues that reflect a dramatic, cloud-filled sky over a restless sea.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9BB3B6#7F9BA0#638186#48696F#305358

Palette guide

How to use Stormy Horizon Gray

Overview

The Stormy Horizon Gray palette captures the serene yet powerful essence of a calm sea under a dramatic, cloud-filled sky. This cool, muted collection, ranging from the deep #305358 to the airy #9BB3B6, offers a sophisticated spectrum of blue-grays and muted greens. It's an excellent choice for designers and developers aiming to evoke tranquility, natural elegance, and a subtle sense of mystery. The distinct yet harmonious variations, such as #638186 and #7F9BA0, provide ample opportunity for creating depth and visual interest in any design project.

Best used for

  • Spa and wellness branding
  • Coastal interior design concepts
  • Environmental organization websites
  • Meditation app interfaces
  • Nature photography displays
  • Sustainable product design

Suggested color roles

primary

#305358 - The darkest, most grounding shade, ideal for deep backgrounds, robust headers, or foundational elements, providing stability.

secondary

#48696F - A strong, mid-dark blue-green, excellent for subheadings, navigation, or interactive elements that need definition.

accent

#9BB3B6 - The lightest, airiest shade, perfect for subtle highlights, hover states, or delicate graphic details, adding a touch of brightness.

background

#7F9BA0 - A balanced, calming mid-tone that serves as an inviting canvas for content, promoting a sense of ease.

text

#305358 - For primary body text on light backgrounds like #9BB3B6 or a near-white, ensuring clear readability. For dark backgrounds, use #9BB3B6.

Accessibility notes

  • Ensure #305358 text on #9BB3B6 background meets WCAG AA contrast for optimal readability.
  • #48696F text on #7F9BA0 might have insufficient contrast for small text; use with caution.
  • The lighter shades, such as #9BB3B6, provide good contrast against the darker tones for text.
  • Always verify contrast ratios, especially for key interactive elements, to ensure usability.

Recommended combinations

Calm Contrast

Strong visual hierarchy for headlines and body text, with a rich supporting blue-green.

#305358 · #9BB3B6 · #48696F

Muted Harmony

Soft, cohesive blend for backgrounds, secondary content, and subtle accents, promoting tranquility.

#7F9BA0 · #638186 · #9BB3B6

Deep Serenity

Robust grouping for sophisticated interfaces or branding, balancing deep tones with a softer mid-gray.

#48696F · #305358 · #7F9BA0

CSS variables

:root {
  --stormy-horizon-gray-1: #9BB3B6;
  --stormy-horizon-gray-2: #7F9BA0;
  --stormy-horizon-gray-3: #638186;
  --stormy-horizon-gray-4: #48696F;
  --stormy-horizon-gray-5: #305358;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-horizon-gray": {
        1: "#9BB3B6",
        2: "#7F9BA0",
        3: "#638186",
        4: "#48696F",
        5: "#305358",
      }
    }
  }
}

Related searches

muted blue green palettecalm stormy colorsserene cool gray schemenatural ocean huestranquil atmospheric design

Palette colors

Hex values

Color 1#9BB3B6
·
Color 2#7F9BA0
·
Color 3#638186
·
Color 4#48696F
·
Color 5#305358
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
2.7:1Fail
3.8:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
1.9:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.7:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
3.8:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Stormy Horizon Gray

View all cool
Rainy Cobblestone Street
Stormy Sky Embrace
City Rain Slicker
Cloud Burst Sky
Cloudburst Sky
Coastal Fog Drift