Palette

Moonlit Alpine Meadow

The serene glow of an alpine meadow under a full moon, casting cool blues and silvery shadows.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#87CEEB#A9BCCC#D4E6EC#F8F8FF#708090

Palette guide

How to use Moonlit Alpine Meadow

Overview

The Moonlit Alpine Meadow palette captures the serene glow of an alpine meadow under a full moon, casting cool blues and silvery shadows. This light, airy collection features the refreshing #87CEEB (Sky Blue) and #A9BCCC (Light Blue-Gray), alongside the soft #D4E6EC (Pale Cyan) and the almost-white #F8F8FF (Ghost White). The grounding #708090 (Slate Gray) adds a touch of subtle shadow. This palette is ideal for designers and developers aiming to create fresh, clean, and tranquil digital experiences. Its light and inviting nature is perfect for applications, websites, or branding that convey serenity, openness, and a gentle elegance, ensuring a harmonious and user-friendly interface that feels crisp and calming.

Best used for

Clean, minimalist web design
Healthcare or wellness apps
Nature-inspired branding
Travel and tourism websites
Photography backdrop themes
Soft, elegant UI/UX designs

Suggested color roles

primary

Utilize #708090 as a grounding dark gray for main text or foundational elements, providing strong contrast.

secondary

Apply #87CEEB for key headings, primary buttons, or significant graphical elements, offering a fresh, inviting feel.

accent

Employ #A9BCCC for subtle highlights, secondary interactive elements, or as a background for lighter content blocks.

background

The lightest shade, #F8F8FF, serves as an excellent clean, open background, promoting readability and a spacious feel.

text

For primary text on light backgrounds, #708090 provides optimal readability. Use #F8F8FF for text on darker elements.

Accessibility notes

Ensure high contrast for text, especially pairing #708090 with #F8F8FF for optimal readability.
Avoid using #A9BCCC text on #D4E6EC backgrounds for small font sizes due to potential low contrast.
Interactive elements should have clear visual cues, perhaps using #87CEEB for hover states.
For a predominantly light palette, ensure darker colors are used for essential information to meet accessibility standards.

Recommended combinations

Meadow Dawn

Creates a very light, airy feel with a vibrant blue accent, ideal for clean content areas.

#F8F8FF · #D4E6EC · #87CEEB

Silver Mist

A balanced cool gray and blue combination, suitable for subtle backgrounds or layered UI elements.

#A9BCCC · #708090 · #D4E6EC

Alpine Glow

A versatile trio providing a vibrant accent, a clean background, and a strong dark for text.

#87CEEB · #F8F8FF · #708090

CSS variables

:root {
  --moonlit-alpine-meadow-1: #87CEEB;
  --moonlit-alpine-meadow-2: #A9BCCC;
  --moonlit-alpine-meadow-3: #D4E6EC;
  --moonlit-alpine-meadow-4: #F8F8FF;
  --moonlit-alpine-meadow-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-alpine-meadow": {
        1: "#87CEEB",
        2: "#A9BCCC",
        3: "#D4E6EC",
        4: "#F8F8FF",
        5: "#708090",
      }
    }
  }
}

Hex values

Color 1#87CEEB

Color 2#A9BCCC

Color 3#D4E6EC

Color 4#F8F8FF

Color 5#708090

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.6:1Fail

2.3:1Fail

1.1:1Fail

1.5:1Fail

1.8:1Fail

2.1:1Fail

1.4:1Fail

1.5:1Fail

1.2:1Fail

3.2:1AA18

1.6:1Fail

1.8:1Fail

1.2:1Fail

3.8:1AA18

2.3:1Fail

2.1:1Fail

3.2:1AA18

3.8:1AA18

Similar palettes

More like Moonlit Alpine Meadow

View all cool

Cobalt Night Sky

Desert Night Sky

Moonlight Garden Serene

Moonlight Lake Glow

Moonlit Garden Path

Moonlit Ocean Shimmer