Palette

Stormy Night Embrace

Deep, atmospheric tones capturing the essence of a brooding sky before a heavy rain.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#34495E#7F8C8D#BDC3C7#1A2F40

Palette guide

How to use Stormy Night Embrace

Overview

The Stormy Night Embrace palette captures the profound depth and moody elegance of a brooding sky before a heavy rain. Featuring incredibly deep blues like #1A2F40 and #2C3E50, contrasted with lighter, atmospheric grays such as #BDC3C7 and #7F8C8D, this collection is perfect for designers and developers seeking a sophisticated, dramatic, and deeply immersive aesthetic. It's ideal for crafting powerful user interfaces, impactful branding, or evocative digital art that conveys a sense of mystery and serene power.

Best used for

Luxury brand websites
Dark mode mobile applications
Atmospheric game environments
High-end corporate branding
Editorial design for serious topics
Photography portfolios with a dramatic flair

Suggested color roles

primary

#1A2F40 - The darkest, most profound shade, ideal for dominant backgrounds, strong headers, or foundational elements, providing immense depth.

secondary

#2C3E50 - A rich, deep blue, excellent for subheadings, navigation, or secondary informational panels, maintaining the dark mood.

accent

#BDC3C7 - The lightest, almost silver-gray, perfect for subtle highlights, borders, or ghost buttons, offering a stark yet elegant contrast.

background

#34495E - A versatile deep blue-gray that provides a balanced canvas for content, maintaining the palette's overall depth and sophistication.

text

#BDC3C7 - For primary body text on dark backgrounds like #1A2F40 or #2C3E50, ensuring legibility and maintaining the moody aesthetic.

Accessibility notes

#BDC3C7 text on #1A2F40 background should be checked for WCAG AA compliance, especially for small font sizes.
Use a slightly brighter white for critical text if #BDC3C7 contrast is insufficient on the darkest shades.
Ensure interactive elements have clear visual states, perhaps using the lightest shade for focus.
Avoid placing #7F8C8D text on #34495E backgrounds without checking contrast.

Recommended combinations

Dramatic Contrast

Powerful pairing for dark mode UIs, with the light gray for text and the deep blue for strong accents.

#1A2F40 · #BDC3C7 · #2C3E50

Subtle Depth

Smooth, layered look for backgrounds and content areas, creating a sophisticated visual flow with muted transitions.

#2C3E50 · #34495E · #7F8C8D

Elegant Highlight

Harmonious blend for secondary information, borders, and subtle graphical elements, anchored by the darkest tone.

#7F8C8D · #BDC3C7 · #1A2F40

CSS variables

:root {
  --stormy-night-embrace-1: #2C3E50;
  --stormy-night-embrace-2: #34495E;
  --stormy-night-embrace-3: #7F8C8D;
  --stormy-night-embrace-4: #BDC3C7;
  --stormy-night-embrace-5: #1A2F40;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-night-embrace": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#7F8C8D",
        4: "#BDC3C7",
        5: "#1A2F40",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#7F8C8D

Color 4#BDC3C7

Color 5#1A2F40

Accessibility

Contrast checker

1.2:1Fail

3.2:1AA18

6.2:1AA

1.3:1Fail

1.2:1Fail

2.7:1Fail

5.2:1AA

1.5:1Fail

3.2:1AA18

2.7:1Fail

2:1Fail

4:1AA18

6.2:1AA

5.2:1AA

2:1Fail

7.7:1AAA

1.3:1Fail

1.5:1Fail

4:1AA18

7.7:1AAA

Similar palettes

More like Stormy Night Embrace

Midnight Library Gloom