Palette

Mountain Summit Vista

The crisp, clear air and expansive views from a towering mountain peak.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A647B#7FA0B8#B0D0E1#2E4558#D8EBF5

Palette guide

How to use Mountain Summit Vista

Overview

The Mountain Summit Vista palette captures the crisp, clear air and expansive views from a towering mountain peak, blending deep and light blues with cool grays. This tranquil collection ranges from the profound depth of #2E4558 to the ethereal lightness of #D8EBF5. Key colors like the rich blue-gray #4A647B and the serene #7FA0B8 provide a harmonious progression of cool, atmospheric tones. This palette is perfect for designs seeking to evoke calm, clarity, and a sense of majestic scale. Designers can leverage its gentle contrasts and refreshing hues to create a feeling of spaciousness and sophisticated tranquility across various digital and print applications, ideal for conveying a clean and elevated aesthetic.

Best used for

travel agency websites (mountain destinations)
luxury resort branding
scientific data visualization
sky-themed app interfaces
outdoor adventure gear marketing
meditation and wellness platforms

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

For optimal readability, use #2E4558 for text on #D8EBF5, 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 #7FA0B8 with #B0D0E1.
Text in #2E4558 on #D8EBF5 provides excellent readability and adherence to WCAG standards.
Avoid using #B0D0E1 for small text on #D8EBF5 as contrast will likely be insufficient.
Pair #4A647B with #D8EBF5 for larger text or UI elements to ensure good visibility.

Recommended combinations

Summit Ascent

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

#2E4558 · #4A647B · #7FA0B8

Clear Sky

Ideal for content sections, with #D8EBF5 as background, #B0D0E1 for secondary text, and #4A647B for headings.

#D8EBF5 · #B0D0E1 · #4A647B

Vista Point

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

#7FA0B8 · #B0D0E1 · #2E4558

CSS variables

:root {
  --mountain-summit-vista-1: #4A647B;
  --mountain-summit-vista-2: #7FA0B8;
  --mountain-summit-vista-3: #B0D0E1;
  --mountain-summit-vista-4: #2E4558;
  --mountain-summit-vista-5: #D8EBF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mountain-summit-vista": {
        1: "#4A647B",
        2: "#7FA0B8",
        3: "#B0D0E1",
        4: "#2E4558",
        5: "#D8EBF5",
      }
    }
  }
}

Hex values

Color 1#4A647B

Color 2#7FA0B8

Color 3#B0D0E1

Color 4#2E4558

Color 5#D8EBF5

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

1.6:1Fail

5:1AA

2.2:1Fail

1.7:1Fail

3.6:1AA18

2.2:1Fail

3.8:1AA18

1.7:1Fail

6.1:1AA

1.3:1Fail

1.6:1Fail

3.6:1AA18

6.1:1AA

8.1:1AAA

5:1AA

2.2:1Fail

1.3:1Fail

8.1:1AAA

Similar palettes

More like Mountain Summit Vista

Mountain Summit Vista

See it in context.

Ready when you are.

Built with Mountain Summit Vista.

How to use Mountain Summit Vista

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Summit Ascent

Clear Sky

Vista Point

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mountain Summit Vista