Palette

Stormy Sky Embrace

A brooding yet comforting palette, capturing the deep blues and greys of a gathering storm.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4682B4#6A5ACD#708090#A9A9A9

Palette guide

How to use Stormy Sky Embrace

Overview

The Stormy Sky Embrace palette offers a brooding yet comforting collection, capturing the deep blues and grays of a gathering storm. Ranging from the profound dark teal of #2F4F4F to the classic medium gray of #A9A9A9, this palette delivers a sophisticated spectrum. The prominent steel blue #4682B4 and the intriguing slate blue-grey #708090 provide versatile mid-tones, while #6A5ACD, a rich medium purple-blue, introduces a unique accent. Ideal for designers and developers seeking to evoke depth, calm, or a sophisticated natural aesthetic, these hex codes are perfect for creating immersive digital environments, impactful branding, or visual narratives that resonate with tranquility and strength.

Best used for

Serene photography websites
Meditation and mindfulness apps
Luxury travel brochures
Art gallery digital interfaces
Weather-themed educational content
High-end corporate presentations

Suggested color roles

primary

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

secondary

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

accent

Introduce #6A5ACD sparingly for interactive elements, hover states, or subtle graphical accents, offering a unique, sophisticated pop.

background

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

text

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

Accessibility notes

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

Recommended combinations

Sky Contrast

For a balanced base: #2F4F4F for primary, #A9A9A9 for backgrounds, and #4682B4 for text/secondary elements.

#2F4F4F · #A9A9A9 · #4682B4

Moody Accents

Ideal for layered UI, with #4682B4 as base, #6A5ACD for striking accents, and #708090 for subtle details.

#4682B4 · #6A5ACD · #708090

Calm Depths

Use #2F4F4F for strong text, #708090 for supporting elements, and #A9A9A9 for clean backgrounds.

#2F4F4F · #708090 · #A9A9A9

CSS variables

:root {
  --stormy-sky-embrace-1: #2F4F4F;
  --stormy-sky-embrace-2: #4682B4;
  --stormy-sky-embrace-3: #6A5ACD;
  --stormy-sky-embrace-4: #708090;
  --stormy-sky-embrace-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-sky-embrace": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#708090",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#6A5ACD

Color 4#708090

Color 5#A9A9A9

Accessibility

Contrast checker

2.2:1Fail

1.7:1Fail

2.2:1Fail

3.8:1AA18

2.2:1Fail

1.3:1Fail

1:1Fail

1.7:1Fail

1.3:1Fail

2.3:1Fail

2.2:1Fail

1:1Fail

1.3:1Fail

1.7:1Fail

3.8:1AA18

1.7:1Fail

2.3:1Fail

1.7:1Fail

Similar palettes

More like Stormy Sky Embrace

Stormy Sky Embrace

See it in context.

Ready when you are.

Built with Stormy Sky Embrace.

How to use Stormy Sky Embrace

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Contrast

Moody Accents

Calm Depths

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Stormy Sky Embrace