Back to palettes

Palette

Stormy Horizon Grey

A grayscale spectrum capturing the subtle shifts of a cloudy sky or a tranquil, misty morning.

monochromeminimal5 colors
More monochrome 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

#2F4F4F#708090#D3D3D3#A9A9A9#696969

Palette guide

How to use Stormy Horizon Grey

Overview

The Stormy Horizon Grey palette (original) offers a sophisticated grayscale spectrum, capturing the subtle shifts of a cloudy sky or a tranquil, misty morning. Featuring a deep, almost black green-gray #2F4F4F, alongside versatile grays like #708090 and the bright #D3D3D3, this collection is perfect for designers and developers seeking a clean, minimalist, and highly adaptable aesthetic. It's ideal for creating a sense of calm, professionalism, and timeless elegance in UI, branding, or editorial design where clarity and mood are essential.

Best used for

  • Minimalist branding
  • Photography portfolio sites
  • UI for professional tools
  • Black and white art displays
  • Corporate presentations
  • Elegant web design

Suggested color roles

primary

#2F4F4F - The darkest, most grounding shade, ideal for dominant backgrounds, strong headers, or foundational elements, providing deep contrast.

secondary

#708090 - A robust slate gray, excellent for subheadings, navigation, or interactive elements that need definition.

accent

#D3D3D3 - The lightest shade, perfect for subtle highlights, borders, or ghost buttons, offering a clean lift.

background

#D3D3D3 - A very light, almost white background that provides excellent contrast for darker text and elements.

text

#2F4F4F - For primary body text on light backgrounds like #D3D3D3, ensuring excellent contrast and legibility. For dark backgrounds, use #D3D3D3.

Accessibility notes

  • #2F4F4F text on #D3D3D3 background provides excellent contrast, meeting WCAG AAA.
  • Ensure #696969 text on #D3D3D3 background also meets WCAG AA for smaller text.
  • For interactive elements, ensure distinct visual feedback, perhaps using #D3D3D3 for hover states.
  • Avoid using light gray text like #A9A9A9 on #708090 backgrounds without checking contrast.

Recommended combinations

High Contrast

Classic, highly readable pairing for text and backgrounds, with a mid-gray for supporting elements.

#2F4F4F · #D3D3D3 · #708090

Grayscale Depth

Smooth, layered look for content areas, cards, or background sections, creating subtle visual interest.

#708090 · #A9A9A9 · #696969

Clean Aesthetics

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

#D3D3D3 · #2F4F4F · #A9A9A9

CSS variables

:root {
  --stormy-horizon-grey-1: #2F4F4F;
  --stormy-horizon-grey-2: #708090;
  --stormy-horizon-grey-3: #D3D3D3;
  --stormy-horizon-grey-4: #A9A9A9;
  --stormy-horizon-grey-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-horizon-grey": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#D3D3D3",
        4: "#A9A9A9",
        5: "#696969",
      }
    }
  }
}

Related searches

grayscale color schememinimalist dark mode paletteelegant grey tonesprofessional UI colorsmoody neutral design

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#A9A9A9
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6:1AA
3.8:1AA18
1.6:1Fail
2
2.2:1Fail
2.7:1Fail
1.7:1Fail
1.4:1Fail
3
6:1AA
2.7:1Fail
1.6:1Fail
3.7:1AA18
4
3.8:1AA18
1.7:1Fail
1.6:1Fail
2.3:1Fail
5
1.6:1Fail
1.4:1Fail
3.7:1AA18
2.3:1Fail

Similar palettes

More like Stormy Horizon Grey

View all monochrome
Calm Stone Meditate
City Grayscale View
City Rooftop Dawn
Cloud Grey Mirage
Concrete Jungle Bloom
Concrete Jungle Canopy