Back to palettes

Palette

Frosted Glass Window

Subtle, ethereal whites and greys that evoke the delicate, translucent beauty of a frosted glass window.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BFC9CE#D0D8DC#E0E6E9#F0F3F5#A8B1B6

Palette guide

How to use Frosted Glass Window

Overview

The Frosted Glass Window palette offers a sophisticated, minimalist range of cool grays and near-whites, perfect for creating clean, ethereal designs. This palette embodies subtle elegance, moving from the slightly darker #A8B1B6 to the crisp lightness of #F0F3F5. The intermediate shades of #BFC9CE, #D0D8DC, and #E0E6E9 provide a gentle, almost imperceptible gradient, ideal for designs that require understated depth without strong color statements. It's an excellent choice for designers aiming for a modern, refined aesthetic in UI/UX, architectural visualizations, or luxury branding, where clarity and spaciousness are paramount.

Best used for

  • High-end luxury product websites or branding
  • Minimalist UI/UX designs for productivity or finance apps
  • Architectural portfolios and interior design presentations
  • Photography websites focusing on clean aesthetics
  • Backgrounds and textures in print design for a subtle effect
  • Corporate design systems requiring a neutral, sophisticated base

Suggested color roles

primary

#A8B1B6 - A solid, cool gray that can define primary sections, provide subtle borders, or serve as a foundational element in a minimalist layout.

secondary

#BFC9CE - Excellent for secondary navigation, card backgrounds, or subtle dividing lines to add structure without overwhelming the primary content.

accent

#D0D8DC - This lighter gray can be used for hover states, subtle active indicators, or to add a touch of gentle contrast on darker grays.

background

#F0F3F5 - The lightest shade, perfect for clean, expansive backgrounds that give an airy, open feel to any design.

text

#A8B1B6 - For body text on #F0F3F5 to maintain the cool, muted aesthetic while ensuring readability. A true black or very dark charcoal might be needed for smaller or critical text.

Accessibility notes

  • Be extremely cautious with text contrast. Most palette colors will not meet WCAG AA contrast for text against each other.
  • For body text, use #A8B1B6 or a darker neutral like charcoal against #F0F3F5.
  • Reserve lighter shades like #D0D8DC or #E0E6E9 for large decorative text or non-essential elements.
  • Ensure interactive elements are clearly distinguishable, potentially by using a subtle border or shadow rather than just color difference.

Recommended combinations

Subtle Depth

Provides gentle layering and contrast for card-based layouts or distinct sections.

#A8B1B6 · #BFC9CE · #F0F3F5

Ethereal Base

Ideal for creating soft, gradient backgrounds or for very light, airy UI elements.

#D0D8DC · #E0E6E9 · #F0F3F5

Clean Structure

Use the darkest for borders or key text, the lightest for backgrounds, and the mid-tone for secondary elements.

#A8B1B6 · #F0F3F5 · #BFC9CE

CSS variables

:root {
  --frosted-glass-window-1: #BFC9CE;
  --frosted-glass-window-2: #D0D8DC;
  --frosted-glass-window-3: #E0E6E9;
  --frosted-glass-window-4: #F0F3F5;
  --frosted-glass-window-5: #A8B1B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-glass-window": {
        1: "#BFC9CE",
        2: "#D0D8DC",
        3: "#E0E6E9",
        4: "#F0F3F5",
        5: "#A8B1B6",
      }
    }
  }
}

Related searches

minimalist grey paletteclean white color schemesubtle UI colorsluxury neutral paletteethereal web design colors

Palette colors

Hex values

Color 1#BFC9CE
·
Color 2#D0D8DC
·
Color 3#E0E6E9
·
Color 4#F0F3F5
·
Color 5#A8B1B6
·

Accessibility

Contrast checker

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

Similar palettes

More like Frosted Glass Window

View all monochrome
Monochromatic Ink Wash
Quiet Loft Space
Abstract Ink Flow
Arctic Snow Fur
City Grayscale View
Cloud Dancer Ballet