Back to palettes

Palette

Stormy Horizon Grey

Graduated greys capturing the brooding atmosphere of a stormy sky at sea.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4750#576574#878F99#B0B5BA#CFD2D5

Palette guide

How to use Stormy Horizon Grey

Overview

The Stormy Horizon Grey palette (2) presents a refined gradient of neutral grays, capturing the subtle shifts of an overcast sky at sea. Ranging from the deep, anchoring #3A4750 to the airy, near-white #CFD2D5, this collection offers exceptional versatility for designers and developers. It's perfect for creating sophisticated, minimalist, and highly functional interfaces where clarity and a serene atmosphere are paramount. The harmonious progression, featuring shades like #576574 and #878F99, ensures smooth transitions and excellent depth.

Best used for

  • Minimalist website design
  • Corporate branding and reports
  • UI for productivity applications
  • Editorial layouts with clean aesthetics
  • Architectural visualization
  • High-tech product interfaces

Suggested color roles

primary

#3A4750 - The darkest, most grounding shade, ideal for dominant backgrounds, strong headers, or foundational elements, providing stability.

secondary

#576574 - A robust mid-dark gray, excellent for subheadings, navigation, or interactive elements that need definition.

accent

#B0B5BA - A lighter gray, perfect for subtle highlights, borders, or ghost buttons, offering a gentle lift.

background

#CFD2D5 - The lightest shade, serving as a clean, bright canvas that enhances readability and provides a fresh feel.

text

#3A4750 - For primary body text on light backgrounds like #CFD2D5, ensuring excellent contrast and legibility. For dark backgrounds, use #CFD2D5.

Accessibility notes

  • #3A4750 text on #CFD2D5 background offers excellent contrast for all content.
  • Ensure #576574 text on #CFD2D5 also meets WCAG AA for smaller text.
  • Avoid using #B0B5BA for small text on #878F99 backgrounds, as contrast may be insufficient.
  • For dark mode, use #CFD2D5 for text on the darker palette colors.

Recommended combinations

Classic Contrast

High-readability pairing for text and backgrounds, with a darker gray for supporting elements.

#3A4750 · #CFD2D5 · #576574

Subtle Gradient

Creates a smooth visual flow for layered interfaces, cards, or background sections, maintaining sophistication.

#576574 · #878F99 · #B0B5BA

Clean Interface

Bright background with strong dark text, complemented by a mid-gray for secondary elements.

#CFD2D5 · #3A4750 · #878F99

CSS variables

:root {
  --stormy-horizon-grey-2-1: #3A4750;
  --stormy-horizon-grey-2-2: #576574;
  --stormy-horizon-grey-2-3: #878F99;
  --stormy-horizon-grey-2-4: #B0B5BA;
  --stormy-horizon-grey-2-5: #CFD2D5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-horizon-grey-2": {
        1: "#3A4750",
        2: "#576574",
        3: "#878F99",
        4: "#B0B5BA",
        5: "#CFD2D5",
      }
    }
  }
}

Related searches

neutral grey color schememinimalist UI palettecool gray gradientsophisticated dark greyatmospheric neutral tones

Palette colors

Hex values

Color 1#3A4750
·
Color 2#576574
·
Color 3#878F99
·
Color 4#B0B5BA
·
Color 5#CFD2D5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
4.6:1AA
6.3:1AA
2
1.6:1Fail
1.8:1Fail
2.9:1Fail
3.9:1AA18
3
2.9:1Fail
1.8:1Fail
1.6:1Fail
2.2:1Fail
4
4.6:1AA
2.9:1Fail
1.6:1Fail
1.4:1Fail
5
6.3:1AA
3.9:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Stormy Horizon Grey

View all neutral
Ancient Temple Relic
Gargoyle Grey
Haunted Library Pages
Moonlit Canyon Path
Mossy Stone Relic
Steel Rust Patina