Palette

Stormy Mountain Peak

A monochromatic spectrum of grays, capturing the dramatic mood of mountains under a stormy sky.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Stormy Mountain Peak 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 Mountain Peak.

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

Data visualization

#4F4F4F#696969#808080#A9A9A9#C0C0C0

Palette guide

How to use Stormy Mountain Peak

Overview

The Stormy Mountain Peak palette presents a dramatic monochromatic spectrum of grays, capturing the raw power and brooding atmosphere of mountains under a stormy sky. Ranging from the deep charcoal #4F4F4F to the bright silver #C0C0C0, this collection offers exceptional versatility for designers and developers. It's perfect for creating strong, sophisticated, and minimalist interfaces where clarity and a powerful mood are paramount. The harmonious progression, featuring shades like #696969 and #808080, ensures smooth transitions and excellent depth.

Best used for

Outdoor adventure brand identity
Photography and art displays
Industrial design interfaces
Minimalist web design
Architectural visualizations
High-contrast UI themes

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

#4F4F4F - For primary body text on light backgrounds like #C0C0C0 or #A9A9A9, ensuring excellent contrast and legibility. For dark backgrounds, use #C0C0C0.

Accessibility notes

#4F4F4F text on #C0C0C0 background offers good contrast, meeting WCAG AA.
Ensure #696969 text on #C0C0C0 also meets WCAG AA for smaller text.
Avoid using #A9A9A9 for small text on #808080 backgrounds, as contrast may be insufficient.
For dark mode, use #C0C0C0 for text on the darker palette colors.

Recommended combinations

Strong Contrast

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

#4F4F4F · #C0C0C0 · #696969

Grayscale Depth

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

#696969 · #808080 · #A9A9A9

Mountain Majesty

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

#C0C0C0 · #4F4F4F · #808080

CSS variables

:root {
  --stormy-mountain-peak-1: #4F4F4F;
  --stormy-mountain-peak-2: #696969;
  --stormy-mountain-peak-3: #808080;
  --stormy-mountain-peak-4: #A9A9A9;
  --stormy-mountain-peak-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "stormy-mountain-peak": {
        1: "#4F4F4F",
        2: "#696969",
        3: "#808080",
        4: "#A9A9A9",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#696969

Color 3#808080

Color 4#A9A9A9

Color 5#C0C0C0

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

3.5:1AA18

4.5:1AA

1.5:1Fail

1.4:1Fail

2.3:1Fail

3:1AA18

2.1:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

3.5:1AA18

2.3:1Fail

1.7:1Fail

1.3:1Fail

4.5:1AA

3:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Stormy Mountain Peak