Palette

Frosted Morning Pane

Soft, icy blues and whites, reminiscent of a frosted window pane on a clear morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Morning Pane 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 Frosted Morning Pane.

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

Data visualization

#BADFE7#D0E9EE#E6F3F5#AED6E1#C2E0E7

Palette guide

How to use Frosted Morning Pane

Overview

The Frosted Morning Pane palette offers a collection of soft, icy blues and near-whites, perfect for evoking a sense of calm and clarity. With shades like the inviting #BADFE7, the airy #D0E9EE, and the crisp #E6F3F5, this palette is ideal for designs that aim for a fresh, clean, and serene aesthetic. Developers and designers will find these cool tones highly versatile for creating tranquil user interfaces, elegant branding, or soothing digital experiences. The subtle variations, including #AED6E1 and #C2E0E7, provide depth without sacrificing the overall light and ethereal mood, making it excellent for minimalist and sophisticated projects.

Best used for

Spa and wellness branding
Clean, minimalist website design
Winter-themed event invitations
Nature-inspired photography backdrops
Baby product packaging
Hospitality interior design concepts

Suggested color roles

primary

Use #BADFE7 as a dominant, calming blue for main sections or prominent UI elements, establishing a cool and inviting base.

secondary

Employ #AED6E1 for supporting elements, subheadings, or as a softer alternative to the primary, providing gentle contrast.

accent

Highlight with #C2E0E7 to draw attention to interactive elements or subtle decorative details, maintaining the palette's light touch.

background

The lightest shade, #E6F3F5, is perfect for clean, airy backgrounds, ensuring content stands out without being overwhelmed.

text

For body text, consider a very dark grey or charcoal for optimal readability against lighter backgrounds, or use #BADFE7 for headings on very light backgrounds.

Accessibility notes

Ensure sufficient contrast when using #E6F3F5 as a background with any lighter text colors.
Pair darker shades like #BADFE7 with white or near-white text for better readability.
Avoid placing similar light tones adjacent to each other without clear boundaries.
Test text against all potential background colors to meet WCAG AA or AAA guidelines.

Recommended combinations

Icy Serenity

Ideal for clean, professional website layouts or tranquil app interfaces.

#BADFE7 · #E6F3F5 · #AED6E1

Winter Dawn

Excellent for elegant stationery, soft branding, or subtle visual accents.

#D0E9EE · #C2E0E7 · #BADFE7

Clear Horizon

Suitable for creating spacious, airy backgrounds with gentle depth in digital art.

#E6F3F5 · #AED6E1 · #D0E9EE

CSS variables

:root {
  --frosted-morning-pane-1: #BADFE7;
  --frosted-morning-pane-2: #D0E9EE;
  --frosted-morning-pane-3: #E6F3F5;
  --frosted-morning-pane-4: #AED6E1;
  --frosted-morning-pane-5: #C2E0E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-morning-pane": {
        1: "#BADFE7",
        2: "#D0E9EE",
        3: "#E6F3F5",
        4: "#AED6E1",
        5: "#C2E0E7",
      }
    }
  }
}

Hex values

Color 1#BADFE7

Color 2#D0E9EE

Color 3#E6F3F5

Color 4#AED6E1

Color 5#C2E0E7

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Frosted Morning Pane

Frosted Morning Pane

See it in context.

Ready when you are.

Built with Frosted Morning Pane.

How to use Frosted Morning Pane

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Icy Serenity

Winter Dawn

Clear Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Frosted Morning Pane