Palette

Moonlit Alpine Bloom

Subtle, cool purples and blues capturing the ethereal beauty of delicate alpine flowers under a moonlit sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E6083#7E96BB#B2C2D9#E0E7ED#A0B2A0

Palette guide

How to use Moonlit Alpine Bloom

Overview

The Moonlit Alpine Bloom palette captures the ethereal beauty of delicate alpine flowers under a moonlit sky, blending subtle, cool purples, blues, and a touch of green-gray. It ranges from the grounding #4E6083 (Slate Blue) and #7E96BB (Light Steel Blue) to the airy #E0E7ED (Light Grayish Blue). The unique #A0B2A0 (Muted Green-Gray) adds an organic touch, while #B2C2D9 (Powder Blue) offers a soft mid-tone. This palette is exceptionally versatile for designers and developers seeking to create tranquil, clean, and sophisticated digital or print environments. Its serene nature is perfect for wellness brands, eco-conscious designs, or any project aiming for a fresh yet calming aesthetic, ensuring a harmonious and inviting user experience.

Best used for

Wellness and spa branding
Eco-friendly product packaging
Tranquil website layouts
Nature photography presentations
Clean mobile app interfaces
Subtle corporate identity

Suggested color roles

primary

Use #4E6083 as a stable, cool blue-gray for main sections, headers, or foundational elements, providing an anchor.

secondary

Apply #7E96BB for sub-sections, navigation, or larger content blocks, offering a gentle, professional feel.

accent

Employ #A0B2A0 for unique accents, icons, or subtle calls to action, introducing an organic, refreshing touch.

background

The lightest shade, #E0E7ED, is an excellent choice for clean, airy backgrounds, promoting readability and spaciousness.

text

For primary text on light backgrounds, #4E6083 offers clear readability. Use #E0E7ED for text on darker backgrounds.

Accessibility notes

Ensure strong contrast for text, especially between #4E6083 and #E0E7ED for optimal readability.
Avoid using #B2C2D9 text on #7E96BB backgrounds for small font sizes due to potential low contrast.
Interactive elements should have distinct visual cues, perhaps using #A0B2A0 for hover states.
For a balanced dark-on-light theme, prioritize the darkest shades for text and the lightest for backgrounds.

Recommended combinations

Alpine Sky

Creates a fresh, open feel with clear depth, suitable for clean headers and content areas.

#4E6083 · #7E96BB · #E0E7ED

Bloom Whisper

A softer, organic blend, perfect for subtle accents, illustrations, or background textures.

#B2C2D9 · #A0B2A0 · #7E96BB

Mountain Serenity

A balanced trio for UI elements, combining depth with a touch of natural accent.

#4E6083 · #B2C2D9 · #A0B2A0

CSS variables

:root {
  --moonlit-alpine-bloom-1: #4E6083;
  --moonlit-alpine-bloom-2: #7E96BB;
  --moonlit-alpine-bloom-3: #B2C2D9;
  --moonlit-alpine-bloom-4: #E0E7ED;
  --moonlit-alpine-bloom-5: #A0B2A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-alpine-bloom": {
        1: "#4E6083",
        2: "#7E96BB",
        3: "#B2C2D9",
        4: "#E0E7ED",
        5: "#A0B2A0",
      }
    }
  }
}

Hex values

Color 1#4E6083

Color 2#7E96BB

Color 3#B2C2D9

Color 4#E0E7ED

Color 5#A0B2A0

Accessibility

Contrast checker

2.1:1Fail

3.5:1AA18

5.1:1AA

2.8:1Fail

2.1:1Fail

1.7:1Fail

2.4:1Fail

1.3:1Fail

3.5:1AA18

1.7:1Fail

1.4:1Fail

1.2:1Fail

5.1:1AA

2.4:1Fail

1.4:1Fail

1.8:1Fail

2.8:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Moonlit Alpine Bloom

View all cool

Alpine Mist

Cloud Forest Haze

Coastal Seaglass Gems

Desert Night Sky

Glacier Peak Serene

Icy Mountain Stream