Back to palettes

Palette

Frosted Window

Soft, hazy blues and muted purples evoke the delicate, dreamlike patterns on a frosted windowpane.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#ADD8E6#D8BFD8#E6E6FA#F0FFFF

Palette guide

How to use Frosted Window

Overview

The "Frosted Window" palette combines soft, hazy blues and muted purples, creating a dreamlike and delicate aesthetic reminiscent of a winter morning. With gentle hues like #B0E0E6 (Light Cyan) and #ADD8E6 (Light Blue), alongside the subtle lavender of #D8BFD8 (Thistle) and the near-white #F0FFFF (Azure), this palette is inherently calming. Designers can use these colors to craft serene digital experiences, elegant branding, or whimsical illustrations. Developers will find these hex codes excellent for soft background textures, layered UI elements, and creating a cohesive, light-filled atmosphere without harsh visual interruption. It's perfect for projects requiring a touch of ethereal beauty.

Best used for

  • Feminine or delicate brand identities
  • Wedding invitations and event collateral
  • Children's book illustrations or websites
  • Spa and beauty product packaging
  • Lifestyle blogs or personal portfolios
  • Art and photography websites focusing on soft themes

Suggested color roles

primary

#B0E0E6 (Light Cyan) - A gentle, inviting blue ideal for main background areas, large sections, or primary content blocks to establish a calm mood.

secondary

#ADD8E6 (Light Blue) - Slightly deeper, suitable for secondary headers, sub-sections, or as a complementary color to add subtle variation.

accent

#D8BFD8 (Thistle) - A soft, muted purple that serves as a delicate accent for interactive elements, highlights, or decorative flourishes.

background

#F0FFFF (Azure) - An almost pure white base that provides maximum lightness and an airy feel, perfect for main content and readability.

text

#B0E0E6 (Light Cyan) - While beautiful, this is too light for main body text. Use a dark grey or charcoal for readability, reserving #B0E0E6 for very large display text or decorative elements.

Accessibility notes

  • Most colors in this palette are very light; ensure strong contrast for text and interactive elements.
  • Avoid using #F0FFFF or #E6E6FA for text, as they will have insufficient contrast on any background within this palette.
  • For body text, recommend using a dark neutral color (e.g., #333333) against #F0FFFF or #B0E0E6.
  • Contrast between #B0E0E6 and #ADD8E6 is low; do not use them together for critical information.

Recommended combinations

Misty Morning

Creates a very light, ethereal background for websites or digital art, providing a sense of openness and purity.

#F0FFFF · #B0E0E6 · #E6E6FA

Lavender Haze

Perfect for feminine branding, soft illustrations, or UI elements that require a delicate touch of blue and purple.

#ADD8E6 · #D8BFD8 · #F0FFFF

Winter Whisper

Use for subtle gradient overlays, soft-focus imagery, or layered graphic elements where smooth transitions are key.

#B0E0E6 · #D8BFD8 · #ADD8E6

CSS variables

:root {
  --frosted-window-1: #B0E0E6;
  --frosted-window-2: #ADD8E6;
  --frosted-window-3: #D8BFD8;
  --frosted-window-4: #E6E6FA;
  --frosted-window-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-window": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#D8BFD8",
        4: "#E6E6FA",
        5: "#F0FFFF",
      }
    }
  }
}

Related searches

pastel blue purple palettesoft winter colorsdreamy UI color schemeethereal brand colorslight blue and lavender design

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#ADD8E6
·
Color 3#D8BFD8
·
Color 4#E6E6FA
·
Color 5#F0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
2
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
3
1.2:1Fail
1.1:1Fail
1.4:1Fail
1.7:1Fail
4
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.2:1Fail
5
1.4:1Fail
1.5:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like Frosted Window

View all Pastel