Palette

Serene Peaks Calm

Evoking the tranquil majesty and untouched beauty of a quiet mountain sanctuary.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Peaks Calm 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 Serene Peaks Calm.

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

Data visualization

#BFC9D4#6C8A8E#4A6C71#DFE9EC#8A8F94

Palette guide

How to use Serene Peaks Calm

Overview

The Serene Peaks Calm palette encapsulates the tranquil majesty of a quiet mountain sanctuary, offering a cool and composed set of colors. Dominating with shades like the deep teal-gray `#4A6C71` and the softer `#6C8A8E`, it's beautifully balanced by the muted gray-blue `#BFC9D4` and the almost-white `#DFE9EC`. A grounding medium gray `#8A8F94` completes the set. This palette is invaluable for designers aiming to convey stability, natural beauty, and a serene atmosphere, making it highly effective for outdoor brands, minimalist interfaces, and calming digital environments.

Best used for

Outdoor and adventure brand marketing
Minimalist website and app design
Wellness and meditation platforms
Environmental non-profit campaigns
Architectural visualization
Travel photography portfolios

Suggested color roles

primary

The deep teal-gray `#4A6C71` provides a strong, anchoring presence, suitable for headers or key brand elements.

secondary

The mid-tone `#6C8A8E` is excellent for supporting sections, subheadings, or as a contrasting panel color.

accent

Use the muted gray-blue `#8A8F94` for subtle accents, interactive states, or to add depth without overwhelming.

background

The very light `#DFE9EC` offers a clean, airy background, enhancing readability and a sense of openness.

text

For body text, `#4A6C71` or a dark gray provides optimal readability against lighter backgrounds, ensuring accessibility.

Accessibility notes

Ensure text using `#BFC9D4` has sufficient contrast against backgrounds like `#DFE9EC`; often, darker text is required.
The darkest shade, `#4A6C71`, offers excellent contrast for white or light gray text, improving legibility.
Avoid using `#6C8A8E` for small text on a `#8A8F94` background without thorough contrast checking.
Maintain clear visual hierarchy by varying color values for text and background to aid users with visual impairments.

Recommended combinations

Mountain Base

A solid, grounded combination; `#4A6C71` for strength, `#6C8A8E` for depth, and `#DFE9EC` for clean content areas.

#4A6C71 · #6C8A8E · #DFE9EC

Cloudy Ridge

Creates a soft, layered feel; ideal for subtle gradients or backgrounds with darker, readable text overlays.

#BFC9D4 · #8A8F94 · #4A6C71

Alpine Haze

Perfect for a light, ethereal design; `#DFE9EC` as a primary background, accented by the cool mid-tones.

#DFE9EC · #6C8A8E · #8A8F94

CSS variables

:root {
  --serene-peaks-calm-1: #BFC9D4;
  --serene-peaks-calm-2: #6C8A8E;
  --serene-peaks-calm-3: #4A6C71;
  --serene-peaks-calm-4: #DFE9EC;
  --serene-peaks-calm-5: #8A8F94;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-peaks-calm": {
        1: "#BFC9D4",
        2: "#6C8A8E",
        3: "#4A6C71",
        4: "#DFE9EC",
        5: "#8A8F94",
      }
    }
  }
}

Hex values

Color 1#BFC9D4

Color 2#6C8A8E

Color 3#4A6C71

Color 4#DFE9EC

Color 5#8A8F94

Accessibility

Contrast checker

2.2:1Fail

3.4:1AA18

1.4:1Fail

1.9:1Fail

2.2:1Fail

1.5:1Fail

3:1AA18

1.1:1Fail

3.4:1AA18

1.5:1Fail

4.6:1AA

1.8:1Fail

1.4:1Fail

3:1AA18

4.6:1AA

2.6:1Fail

1.9:1Fail

1.1:1Fail

1.8:1Fail

2.6:1Fail

Similar palettes

More like Serene Peaks Calm

Calm Lake Reflections

Cool Mist Dawn