Palette

Mountain Ridge

Serene greys and soft blues reflect the quiet grandeur of majestic mountain peaks and crisp air.

NeutralNatural5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#778899#B0C4DE#DCDCDC#E6E6FA

Palette guide

How to use Mountain Ridge

Overview

The Mountain Ridge palette captures the quiet grandeur of majestic peaks and crisp air, blending serene grays and soft blues. This tranquil collection ranges from the deep, teal-gray of #2F4F4F to the almost ethereal light blue-gray of #E6E6FA. Key colors like the balanced #778899 and the classic #B0C4DE provide a harmonious progression of cool, natural tones. This palette is perfect for designs seeking to evoke calm, clarity, and a sophisticated, natural elegance. Designers can leverage its gentle contrasts and refreshing hues to create a sense of peace and spaciousness across various digital and print applications, ideal for conveying a clean and refined aesthetic.

Best used for

luxury real estate websites
wellness retreat branding
high-tech corporate design
sustainable energy companies
winter sports apparel
minimalist graphic design

Suggested color roles

primary

Use #2F4F4F as a strong primary for main navigation or foundational elements, providing a deep, sophisticated anchor.

secondary

Apply #778899 for secondary content blocks or larger graphical elements, offering a balanced, cool mid-tone.

accent

Introduce #B0C4DE as a refreshing accent for interactive states or highlights, adding a touch of cool clarity.

background

Employ #E6E6FA for clean, expansive backgrounds, offering excellent readability for darker text and a sense of openness.

text

For optimal readability, use #2F4F4F for text on #E6E6FA, or a dark charcoal for text on any of the lighter shades.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing mid-tones like #778899 with #B0C4DE.
Text in #2F4F4F on #E6E6FA provides excellent readability and adherence to WCAG standards.
Avoid using #DCDCDC for small text on #E6E6FA as contrast will likely be insufficient.
Pair #778899 with #E6E6FA for larger text or UI elements to ensure good visibility.

Recommended combinations

Ridge Ascent

Excellent for creating depth in UI elements or background gradients, mimicking mountain layers.

#2F4F4F · #778899 · #B0C4DE

Crisp Air

Ideal for content sections, with #E6E6FA as background, #DCDCDC for secondary text, and #778899 for headings.

#E6E6FA · #DCDCDC · #778899

Summit View

Suitable for subtle branding or icon sets, offering a natural cool progression with a strong anchor.

#B0C4DE · #778899 · #2F4F4F

CSS variables

:root {
  --mountain-ridge-1: #2F4F4F;
  --mountain-ridge-2: #778899;
  --mountain-ridge-3: #B0C4DE;
  --mountain-ridge-4: #DCDCDC;
  --mountain-ridge-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mountain-ridge": {
        1: "#2F4F4F",
        2: "#778899",
        3: "#B0C4DE",
        4: "#DCDCDC",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#778899

Color 3#B0C4DE

Color 4#DCDCDC

Color 5#E6E6FA

Accessibility

Contrast checker

2.5:1Fail

5:1AA

6.5:1AA

7.3:1AAA

2.5:1Fail

2:1Fail

2.7:1Fail

3:1Fail

5:1AA

2:1Fail

1.3:1Fail

1.4:1Fail

6.5:1AA

2.7:1Fail

1.3:1Fail

1.1:1Fail

7.3:1AAA

3:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Mountain Ridge

View all Neutral

Boho Earth Weave

Whispering Canyon Wall

Woven Fiber Earth

Coastal Dune Serenity

Coffee Cream Blend

Pebble Shore