Back to palettes

Palette

Smoky Mountain Ridge

A calming gradient of smoky greys, evoking the majestic and misty peaks of a mountain range.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Mountain Ridge 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 Smoky Mountain Ridge.

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

Data visualization

#5A5A5A#777777#949494#B1B1B1#CDCDCD

Palette guide

How to use Smoky Mountain Ridge

Overview

The Smoky Mountain Ridge palette offers a calming gradient of smoky grays, evoking the majestic and misty peaks of a mountain range. From the deep #5A5A5A (Dark Gray) to the ethereal #CDCDCD (Light Gray), with harmonious mid-tones like #777777 (Dim Gray) and #949494 (Gray), this collection provides a serene and minimal aesthetic. Designers and developers can utilize these tones to create peaceful digital experiences, branding, or interfaces that convey a sense of nature, tranquility, and understated elegance, perfect for projects requiring a soothing and grounded visual identity.

Best used for

  • Nature-themed websites or mobile applications
  • Photography portfolios (to not distract from images)
  • Serene meditation or wellness apps and platforms
  • Branding for outdoor apparel or adventure gear
  • Architectural rendering backgrounds or visualizations
  • Minimalist user interfaces focused on calm and clarity

Suggested color roles

primary

#5A5A5A serves as a solid, grounding base, reminiscent of a mountain peak, ideal for primary backgrounds or strong elements.

secondary

#777777 provides a versatile mid-tone, excellent for secondary sections, panels, or subtle content divisions.

accent

#B1B1B1 offers a light, misty accent, perfect for subtle highlights, borders, or ethereal effects.

background

Use #CDCDCD for a light, airy, misty feel, or #5A5A5A for a darker, more dramatic, and grounded base.

text

#5A5A5A is ideal for dark text on light backgrounds like #CDCDCD. Conversely, #CDCDCD ensures clear readability when used as light text on dark backgrounds.

Accessibility notes

  • #5A5A5A on #CDCDCD provides excellent contrast, ensuring readability for all text sizes.
  • Be cautious when using adjacent grays like #777777 on #949494 for text, as contrast may be insufficient; opt for larger text or a more distinct contrast.
  • For optimal readability, ensure a significant jump in lightness/darkness between text and background colors.
  • This palette lends itself well to gradient backgrounds, but text overlay contrast should always be checked carefully against WCAG guidelines.

Recommended combinations

Deep Ridge

Creates a strong, progressive dark aesthetic, ideal for establishing depth in UI elements or background layers, like mountain contours.

#5A5A5A · #777777 · #949494

Misty Horizon

Offers a soft, seamless transition between tones, perfect for subtle background gradients or layered visual effects evoking mist.

#777777 · #949494 · #B1B1B1

Summit Light

Delivers a clean, breathable aesthetic with a lighter touch, suitable for minimalist layouts where a sense of openness is desired.

#949494 · #B1B1B1 · #CDCDCD

CSS variables

:root {
  --smoky-mountain-ridge-1: #5A5A5A;
  --smoky-mountain-ridge-2: #777777;
  --smoky-mountain-ridge-3: #949494;
  --smoky-mountain-ridge-4: #B1B1B1;
  --smoky-mountain-ridge-5: #CDCDCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-mountain-ridge": {
        1: "#5A5A5A",
        2: "#777777",
        3: "#949494",
        4: "#B1B1B1",
        5: "#CDCDCD",
      }
    }
  }
}

Related searches

mountain grey paletteserene monochrome colorsminimalist grey scalecool grey gradientsnature inspired UI

Palette colors

Hex values

Color 1#5A5A5A
·
Color 2#777777
·
Color 3#949494
·
Color 4#B1B1B1
·
Color 5#CDCDCD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.2:1AA18
4.3:1AA18
2
1.5:1Fail
1.5:1Fail
2.1:1Fail
2.8:1Fail
3
2.3:1Fail
1.5:1Fail
1.4:1Fail
1.9:1Fail
4
3.2:1AA18
2.1:1Fail
1.4:1Fail
1.3:1Fail
5
4.3:1AA18
2.8:1Fail
1.9:1Fail
1.3:1Fail

Similar palettes

More like Smoky Mountain Ridge

View all monochrome
Granite Peak Twilight
Arctic Explorer Suit
Arctic Fox Fur
Arctic Whispers Snow
Basalt Stream Pebble
City Grayscale View