Palette

Misty Alpine Dawn

Soft, muted colors reflecting the serene and chilly atmosphere of an alpine dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A7B3BF#CED9E0#E0E8EB#6B7C8C#8FA2AF

Palette guide

How to use Misty Alpine Dawn

Overview

The "Misty Alpine Dawn" palette offers a tranquil collection of soft, muted cool tones, perfect for evoking serenity and calm. Centered around the gentle blue-grey of #A7B3BF, it blends seamlessly with the airy lightness of #CED9E0 and the subtle warmth of #E0E8EB. Deeper shades like the grounding #6B7C8C and the soft #8FA2AF provide necessary depth. This palette is ideal for designers and developers aiming to create interfaces or branding that feel sophisticated, understated, and refreshingly cool, reminiscent of a crisp, foggy mountain morning. Its harmonious blend ensures a cohesive and visually pleasing aesthetic.

Best used for

Wellness and meditation applications
Luxury spa branding and websites
Minimalist fashion or home decor platforms
Serene nature photography portfolios
Clean, professional corporate identities
Winter-themed digital content

Suggested color roles

primary

Use #A7B3BF as a dominant background or main UI color for a serene, foundational presence.

secondary

Employ #8FA2AF for supporting elements, subheadings, or secondary navigation to maintain visual harmony.

accent

Apply #6B7C8C sparingly for calls to action, important icons, or subtle highlights that require more depth.

background

Utilize #E0E8EB for expansive backgrounds, card elements, or light sections to create an airy, clean canvas.

text

For optimal readability, use a dark charcoal or black text color against lighter backgrounds like #E0E8EB and #CED9E0. For darker elements, consider white or a very light grey.

Accessibility notes

Ensure sufficient contrast between #6B7C8C text and lighter backgrounds like #E0E8EB for WCAG AA compliance.
Avoid using lighter palette colors (e.g., #CED9E0) for small text without a significantly darker background.
Test interactive elements (buttons, links) with states using #6B7C8C or #8FA2AF for clear feedback.
Prefer black or dark charcoal for body text on #CED9E0 and #E0E8EB to guarantee readability for all users.

Recommended combinations

Misty Base

Ideal for background layers, subtle card elements, and a gentle, layered UI aesthetic.

#E0E8EB · #CED9E0 · #A7B3BF

Alpine Depth

Effective for main content blocks, headers, and navigation, offering clear visual hierarchy.

#6B7C8C · #8FA2AF · #A7B3BF

Soft Contrast

Use for primary sections where a light background needs a distinct, yet muted, content color.

#A7B3BF · #E0E8EB · #6B7C8C

CSS variables

:root {
  --misty-alpine-dawn-2-1: #A7B3BF;
  --misty-alpine-dawn-2-2: #CED9E0;
  --misty-alpine-dawn-2-3: #E0E8EB;
  --misty-alpine-dawn-2-4: #6B7C8C;
  --misty-alpine-dawn-2-5: #8FA2AF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-alpine-dawn-2": {
        1: "#A7B3BF",
        2: "#CED9E0",
        3: "#E0E8EB",
        4: "#6B7C8C",
        5: "#8FA2AF",
      }
    }
  }
}

Hex values

Color 1#A7B3BF

Color 2#CED9E0

Color 3#E0E8EB

Color 4#6B7C8C

Color 5#8FA2AF

Accessibility

Contrast checker

1.5:1Fail

1.7:1Fail

2:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

3:1Fail

1.8:1Fail

1.7:1Fail

1.2:1Fail

3.5:1AA18

2.1:1Fail

2:1Fail

3:1Fail

3.5:1AA18

1.6:1Fail

1.2:1Fail

1.8:1Fail

2.1:1Fail

1.6:1Fail

Similar palettes

More like Misty Alpine Dawn

Misty Alpine Dawn

See it in context.

Ready when you are.

Built with Misty Alpine Dawn.

How to use Misty Alpine Dawn

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Base

Alpine Depth

Soft Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Misty Alpine Dawn