Palette

Misty Alpine Peak

Hushed and vast, inspired by the subdued tones of an alpine peak veiled in morning mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Alpine 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 Misty Alpine Peak.

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

Data visualization

#A9B0B7#7C8B9A#5E6A78#434C55#CADDE9

Palette guide

How to use Misty Alpine Peak

Overview

The "Misty Alpine Peak" palette conveys a sense of hushed vastness, inspired by mountain peaks veiled in morning mist. It features a sophisticated gradient of cool greys and subtle blue undertones, from the light #CADDE9 to the mid-tone #A9B0B7, and deepening into #7C8B9A, #5E6A78, and the commanding #434C55. This collection is perfect for designers and developers aiming to create professional, authoritative, and serene interfaces or branding. Its subdued yet powerful aesthetic is ideal for conveying reliability and sophistication, making it suitable for high-end corporate or luxury digital experiences that value understated elegance and strength.

Best used for

Corporate and financial services websites
Luxury automotive branding
High-end electronics interfaces
Professional services firms
Architectural and interior design portfolios
Masculine-oriented product packaging

Suggested color roles

primary

Utilize #434C55 as the dominant color for strong headers, crucial calls to action, or primary navigation, projecting authority.

secondary

Employ #5E6A78 for supporting content blocks, subheadings, or secondary interactive elements, maintaining visual depth.

accent

Apply #CADDE9 sparingly for subtle highlights, interactive states, or decorative lines that provide a gentle contrast.

background

Designate #A9B0B7 as a versatile mid-tone background, offering a balanced canvas that works well with both darker and lighter elements.

text

For optimal readability, use white or a very light grey on #434C55 and #5E6A78. For lighter backgrounds like #CADDE9, use #434C55 or black text.

Accessibility notes

Ensure white text on #434C55 and #5E6A78 backgrounds meets WCAG AA contrast standards.
Avoid using #A9B0B7 or #CADDE9 for small text on light backgrounds; prefer darker palette colors.
Provide clear hover/focus states for interactive elements, possibly by using #CADDE9 against a darker button.
Test color pairings rigorously, as the tonal closeness of some colors might reduce readability if not carefully applied.

Recommended combinations

Solid Foundation

Excellent for main content sections, ensuring strong readability with a sophisticated, layered look.

#434C55 · #A9B0B7 · #CADDE9

Subtle Hierarchy

Ideal for secondary sections, subtle dividers, or infographics, providing depth without harsh contrast.

#5E6A78 · #7C8B9A · #CADDE9

Peak Contrast

Use for prominent features, calls to action, or sections requiring high impact against a softer background.

#434C55 · #CADDE9 · #A9B0B7

CSS variables

:root {
  --misty-alpine-peak-2-1: #A9B0B7;
  --misty-alpine-peak-2-2: #7C8B9A;
  --misty-alpine-peak-2-3: #5E6A78;
  --misty-alpine-peak-2-4: #434C55;
  --misty-alpine-peak-2-5: #CADDE9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-alpine-peak-2": {
        1: "#A9B0B7",
        2: "#7C8B9A",
        3: "#5E6A78",
        4: "#434C55",
        5: "#CADDE9",
      }
    }
  }
}

Hex values

Color 1#A9B0B7

Color 2#7C8B9A

Color 3#5E6A78

Color 4#434C55

Color 5#CADDE9

Accessibility

Contrast checker

1.6:1Fail

2.5:1Fail

4:1AA18

1.6:1Fail

2.5:1Fail

1.6:1Fail

3.9:1AA18

4:1AA18

2.5:1Fail

1.6:1Fail

6.3:1AA

1.6:1Fail

2.5:1Fail

3.9:1AA18

6.3:1AA

Similar palettes

More like Misty Alpine Peak

Misty Alpine Peak

See it in context.

Ready when you are.

Built with Misty Alpine Peak.

How to use Misty Alpine Peak

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Solid Foundation

Subtle Hierarchy

Peak Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Alpine Peak