Back to palettes

Palette

Stormy Horizon Drama

Moody and atmospheric grays and deep blues, like watching a dramatic storm gather over the distant ocean.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4750#57636B#7D8890#2C353C#4C575F

Palette guide

How to use Stormy Horizon Drama

Overview

The Stormy Horizon Drama palette masterfully captures the deep, brooding atmosphere of a storm gathering over the ocean. This monochromatic collection of cool grays and deep blues, ranging from the profound #2C353C to the lighter #7D8890, provides a sophisticated and intense foundation. Designers and developers will find these shades ideal for creating depth, elegance, and a sense of calm power in their projects. The subtle variations between #3A4750 and #4C575F allow for refined layering and visual hierarchy without relying on high contrast.

Best used for

  • High-end corporate branding
  • Luxury automotive design
  • Dark mode UI themes
  • Architectural rendering
  • Fine art photography displays
  • Elegant editorial layouts

Suggested color roles

primary

#2C353C - The darkest shade, perfect for dominant backgrounds, strong headers, or foundational elements, establishing deep mood.

secondary

#3A4750 - A slightly lighter deep blue-gray, excellent for sub-sections, navigation, or secondary informational panels.

accent

#7D8890 - The lightest gray, ideal for subtle highlights, borders, or ghost buttons, offering a gentle lift.

background

#4C575F - A versatile mid-dark gray that provides a balanced canvas for content, maintaining the palette's overall depth.

text

#7D8890 - For primary body text on dark backgrounds like #2C353C or #3A4750, ensuring legibility and maintaining the moody aesthetic.

Accessibility notes

  • #7D8890 text on #2C353C background should be checked for WCAG AA compliance, especially for small font sizes.
  • Use a slightly brighter white or off-white for critical text if #7D8890 contrast is insufficient on darker shades.
  • Ensure interactive elements have clear visual states, perhaps using the lightest shade for focus.
  • Avoid using #7D8890 as a background for light text, as contrast will be too low.

Recommended combinations

Deep Foundation

Robust pairing for dark mode UIs, with the light gray for text and the mid-tone for subtle separation.

#2C353C · #7D8890 · #3A4750

Gradual Depth

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

#3A4750 · #4C575F · #57636B

Subtle Elegance

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

#57636B · #7D8890 · #2C353C

CSS variables

:root {
  --stormy-horizon-drama-1: #3A4750;
  --stormy-horizon-drama-2: #57636B;
  --stormy-horizon-drama-3: #7D8890;
  --stormy-horizon-drama-4: #2C353C;
  --stormy-horizon-drama-5: #4C575F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-horizon-drama": {
        1: "#3A4750",
        2: "#57636B",
        3: "#7D8890",
        4: "#2C353C",
        5: "#4C575F",
      }
    }
  }
}

Related searches

deep cool gray palettemoody monochromatic colorsstormy ocean dark themeelegant blue gray schemesophisticated neutral tones

Palette colors

Hex values

Color 1#3A4750
·
Color 2#57636B
·
Color 3#7D8890
·
Color 4#2C353C
·
Color 5#4C575F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
1.3:1Fail
1.3:1Fail
2
1.5:1Fail
1.7:1Fail
2:1Fail
1.2:1Fail
3
2.6:1Fail
1.7:1Fail
3.4:1AA18
2:1Fail
4
1.3:1Fail
2:1Fail
3.4:1AA18
1.7:1Fail
5
1.3:1Fail
1.2:1Fail
2:1Fail
1.7:1Fail

Similar palettes

More like Stormy Horizon Drama

View all cool
Coastal Tempest Gloom
Oceanic Storm Surge
Stormy Coast Drift
Stormy Coast Horizon
Tempest Cloud Waters
Tempest Sea Depths