Back to palettes

Palette

Misty Alpine Dawn

Captures the tranquil, muted beauty of a foggy morning breaking over alpine peaks.

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

#D3D3D3#708090#B0C4DE#ADD8E6#F0F8FF

Palette guide

How to use Misty Alpine Dawn

Overview

The "Misty Alpine Dawn" palette embodies tranquility with its blend of muted blues and soft greys, reflecting a serene morning over mountain peaks. Featuring the calming light grey #D3D3D3, the grounding blue-grey #708090, and the refreshing #B0C4DE, this collection is perfect for designers and developers seeking a clean, contemplative aesthetic. The subtle addition of #ADD8E6 and the airy #F0F8FF completes a harmonious scheme. It's an excellent choice for projects that require a sophisticated yet approachable feel, evoking nature's quiet beauty and a sense of peaceful clarity in digital and print applications.

Best used for

  • Wellness and mindfulness applications
  • Nature-themed websites and blogs
  • Clean, modern corporate branding
  • Luxury travel and hospitality design
  • Minimalist product interfaces
  • Serene home decor e-commerce

Suggested color roles

primary

Designate #708090 as the primary color for headers, main navigation, or significant UI elements to establish a strong, calm presence.

secondary

Use #B0C4DE for supporting content blocks, secondary buttons, or subtle illustrations to complement the primary hue.

accent

Apply #ADD8E6 sparingly for calls to action, interactive elements, or focal points, providing a gentle, inviting highlight.

background

Utilize #F0F8FF as the main background color for a pristine, airy canvas, allowing other colors to truly stand out.

text

For excellent contrast and readability, choose #708090 or a deep charcoal for body text on lighter backgrounds like #F0F8FF and #D3D3D3.

Accessibility notes

  • Ensure #708090 text on #F0F8FF background meets WCAG AA contrast standards for readability.
  • Avoid using #D3D3D3 or #ADD8E6 for small text unless paired with a very dark background.
  • Provide clear hover/focus states for interactive elements, possibly using #ADD8E6 against #B0C4DE.
  • Reserve the lightest colors like #F0F8FF for backgrounds or large decorative elements, not critical text.

Recommended combinations

Misty Base

Creates a soft, ethereal background and secondary element scheme, perfect for a serene feel.

#F0F8FF · #D3D3D3 · #B0C4DE

Clear Focus

Excellent for primary content areas, headings, and calls to action, ensuring clarity and calm.

#708090 · #ADD8E6 · #D3D3D3

Alpine Harmony

Suitable for data visualization, infographics, or sections requiring a balanced cool tone progression.

#B0C4DE · #ADD8E6 · #708090

CSS variables

:root {
  --misty-alpine-dawn-1: #D3D3D3;
  --misty-alpine-dawn-2: #708090;
  --misty-alpine-dawn-3: #B0C4DE;
  --misty-alpine-dawn-4: #ADD8E6;
  --misty-alpine-dawn-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-alpine-dawn": {
        1: "#D3D3D3",
        2: "#708090",
        3: "#B0C4DE",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

tranquil blue grey palettecalm nature UI colorslight blue serene designmuted mountain aestheticsoft cool branding

Palette colors

Hex values

Color 1#D3D3D3
·
Color 2#708090
·
Color 3#B0C4DE
·
Color 4#ADD8E6
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
1.2:1Fail
1:1Fail
1.4:1Fail
2
2.7:1Fail
2.3:1Fail
2.7:1Fail
3.8:1AA18
3
1.2:1Fail
2.3:1Fail
1.2:1Fail
1.7:1Fail
4
1:1Fail
2.7:1Fail
1.2:1Fail
1.4:1Fail
5
1.4:1Fail
3.8:1AA18
1.7:1Fail
1.4:1Fail

Similar palettes

More like Misty Alpine Dawn

View all Cool