Back to palettes

Palette

Frosted Window Pane

Soft, muted blues and greys, reflecting the tranquil patterns of frost on a winter windowpane.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#e0f0f2#c0d8db#a0bfc4#80a8ad#609096

Palette guide

How to use Frosted Window Pane

Overview

The "Frosted Window Pane" palette offers a sophisticated range of cool, muted blue-greys, capturing the subtle beauty of a winter morning. This gradient-like collection, from the airy #e0f0f2 (Light Cyan) to the deep #609096 (Dark Cyan), provides a cohesive and tranquil aesthetic. Designers can utilize these shades for elegant corporate branding, minimalist user interfaces, or any project aiming for a calm and professional feel. Developers will appreciate the smooth transitions between #c0d8db (Light Grayish Cyan) and #80a8ad (Dark Grayish Cyan) for creating subtle depth, background textures, or sophisticated data visualizations. This palette is inherently versatile for establishing a refined, understated presence.

Best used for

  • Corporate websites and professional portfolios
  • Minimalist UI/UX design
  • Luxury product packaging
  • Spa or wellness brand identities
  • Data visualization dashboards
  • Architectural or interior design presentations

Suggested color roles

primary

#a0bfc4 (Desaturated Cyan) - A balanced mid-tone ideal for main content sections, primary buttons, or prominent headers.

secondary

#80a8ad (Dark Grayish Cyan) - Provides a deeper, more grounding tone for secondary navigation, important data points, or subtle background patterns.

accent

#609096 (Dark Cyan) - A strong, deep accent perfect for call-to-action elements, critical alerts, or adding visual weight to key information.

background

#e0f0f2 (Light Cyan) - An extremely light, almost off-white base that offers a clean, expansive canvas for content, maintaining an airy feel.

text

#609096 (Dark Cyan) - Excellent for main body text on light backgrounds like #e0f0f2, ensuring strong readability and maintaining palette cohesion.

Accessibility notes

  • Ensure text in #e0f0f2 or #c0d8db is not placed on similar light backgrounds to avoid readability issues.
  • The darker shades like #80a8ad and #609096 offer good contrast for text against #e0f0f2.
  • Check contrast ratios for all text elements, especially when using #a0bfc4 on #c0d8db.
  • Consider using #609096 for essential text elements to meet WCAG AA standards on lighter backgrounds.

Recommended combinations

Gradient Frost

Ideal for smooth background gradients, layered UI elements, or sequential data displays where a subtle progression is desired.

#E0F0F2 · #C0D8DB · #A0BFC4

Deep Serenity

Use for robust headers, footer designs, or sections requiring more visual weight and depth, providing strong contrast within the palette.

#A0BFC4 · #80A8AD · #609096

Clean Slate

Effective for high-contrast text and interactive elements on a pristine background, suitable for minimalist web pages or reports.

#E0F0F2 · #609096 · #80A8AD

CSS variables

:root {
  --frosted-window-pane-1: #e0f0f2;
  --frosted-window-pane-2: #c0d8db;
  --frosted-window-pane-3: #a0bfc4;
  --frosted-window-pane-4: #80a8ad;
  --frosted-window-pane-5: #609096;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-window-pane": {
        1: "#e0f0f2",
        2: "#c0d8db",
        3: "#a0bfc4",
        4: "#80a8ad",
        5: "#609096",
      }
    }
  }
}

Related searches

muted blue grey color palettewinter calm web colorssophisticated cool tonesminimalist ui colorsprofessional blue grey design

Palette colors

Hex values

Color 1#e0f0f2
·
Color 2#c0d8db
·
Color 3#a0bfc4
·
Color 4#80a8ad
·
Color 5#609096
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.2:1Fail
3:1AA18
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.4:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.2:1Fail
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
3:1AA18
2.4:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Frosted Window Pane

View all cool
Frozen Tundra Mist
Winter Solstice Calm
Aegean Isle Horizon
Alpine Forest Chill
Alpine Frost Serenity
Arctic Bloom Whisper