Back to palettes

Palette

Alpine Mist

A soothing palette inspired by the tranquil silence and soft colors of a misty alpine lake at daybreak.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#78909C#A0B9BE#C7D9DA#546E7A#37474F

Palette guide

How to use Alpine Mist

Overview

The Alpine Mist palette is a soothing collection of cool grays and muted blues, inspired by the tranquil silence and soft colors of a misty alpine lake at daybreak. It features a sophisticated gradient, from the deep, grounding #37474F and the rich #546E7A, through the versatile #78909C. Lighter, ethereal tones like #A0B9BE and the almost white #C7D9DA complete the spectrum, evoking the soft haze of morning mist. This palette is ideal for designers and developers seeking a calm, sophisticated, and minimalist aesthetic. It's perfectly suited for projects requiring a sense of peace, clarity, and understated elegance, such as luxury brands, corporate interfaces, or serene digital environments.

Best used for

  • Luxury brand identities
  • Corporate website designs
  • Minimalist UI/UX projects
  • High-end interior design concepts
  • Serene digital dashboards
  • Photography portfolios

Suggested color roles

primary

Use #37474F as the deepest, grounding blue-gray for primary content, conveying stability and sophistication.

secondary

Apply #546E7A as a rich, versatile mid-gray for secondary elements, adding balance and depth.

accent

Employ #78909C as a soft, subtle accent for highlights or delicate interactive elements.

background

Utilize #C7D9DA as a light, airy, cool base, creating a sense of spaciousness and tranquility.

text

Set body text in #37474F, the darkest color, for optimal readability on light backgrounds like #C7D9DA.

Accessibility notes

  • Text in #37474F on #C7D9DA background offers excellent contrast, ensuring readability for all users.
  • Avoid using #A0B9BE for small text on #78909C background due to low contrast, impacting legibility.
  • Ensure interactive elements have distinct visual cues in addition to color to aid navigation and usability.
  • Use the darker colors for headings and calls-to-action to ensure maximum legibility and visual impact.

Recommended combinations

Misty Depths

Creates a profound, layered depth, ideal for primary content blocks, footers, or atmospheric backgrounds.

#37474F · #546E7A · #78909C

Dawn Haze

A light, ethereal combination perfect for headers, subtle gradients, or decorative elements.

#C7D9DA · #A0B9BE · #78909C

Cool Serenity

Provides a balanced, professional flow, suitable for data visualization or layered UI components.

#546E7A · #A0B9BE · #37474F

CSS variables

:root {
  --alpine-mist-1: #78909C;
  --alpine-mist-2: #A0B9BE;
  --alpine-mist-3: #C7D9DA;
  --alpine-mist-4: #546E7A;
  --alpine-mist-5: #37474F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "alpine-mist": {
        1: "#78909C",
        2: "#A0B9BE",
        3: "#C7D9DA",
        4: "#546E7A",
        5: "#37474F",
      }
    }
  }
}

Related searches

cool gray blue palettemisty mountain colorsserene minimalist schemecalm gray palettesophisticated blue gray

Palette colors

Hex values

Color 1#78909C
·
Color 2#A0B9BE
·
Color 3#C7D9DA
·
Color 4#546E7A
·
Color 5#37474F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
1.6:1Fail
2.9:1Fail
2
1.6:1Fail
1.4:1Fail
2.6:1Fail
4.7:1AA
3
2.3:1Fail
1.4:1Fail
3.7:1AA18
6.6:1AA
4
1.6:1Fail
2.6:1Fail
3.7:1AA18
1.8:1Fail
5
2.9:1Fail
4.7:1AA
6.6:1AA
1.8:1Fail

Similar palettes

More like Alpine Mist

View all cool
Misty Mountain
Misty Mountain Dawn
Misty Mountain Trail
Weathered Beach Stone
Arctic Lake Glass
Arctic Whisper Glade