Back to palettes

Palette

Frosty Winter Glade

A tranquil blend of icy blues and crisp whites, capturing the serene stillness of a frosted winter forest glade.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosty Winter Glade 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 Frosty Winter Glade.

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

Data visualization

#A7CAD7#C6E0E6#DAF0F5#EFF7F8#86B2C0

Palette guide

How to use Frosty Winter Glade

Overview

The Frosty Winter Glade palette, identified as frosty-winter-glade-2, presents a tranquil blend of icy blues and crisp whites, perfectly capturing the serene stillness of a frosted winter forest glade. This collection includes a soft, muted blue #A7CAD7, a lighter blue #C6E0E6, a very pale blue #DAF0F5, an almost white #EFF7F8, and a slightly deeper blue #86B2C0. Designers and developers can leverage these cool, airy tones to create minimalist, calming, and expansive digital environments. The subtle variations in lightness allow for gentle layering and visual hierarchy, making it ideal for clean interfaces, serene branding, or backgrounds that aim for a fresh, ethereal quality.

Best used for

  • Minimalist web designs and clean user interfaces
  • Branding for spas, wellness, or eco-friendly products
  • Serene photography portfolios or art websites
  • Mobile app themes focused on relaxation and calm
  • Digital publications with a clean, airy aesthetic
  • Environmental organizations or nature-themed projects

Suggested color roles

primary

#86B2C0 for main headings, navigation, or key calls to action, providing the most visual weight.

secondary

#A7CAD7 for subheadings, secondary interactive elements, or background sections needing slight definition.

accent

#C6E0E6 can be used for subtle highlights, interactive states, or soft graphic elements.

background

#EFF7F8 or #DAF0F5 provides a pristine, airy canvas, perfect for content to breathe.

text

Dark charcoal like #333333 or #86B2C0 for primary text on the lightest backgrounds.

Accessibility notes

  • #86B2C0 text on #EFF7F8 or #DAF0F5 provides good contrast for readability.
  • Be cautious with #A7CAD7 or #C6E0E6 text on #EFF7F8 for small text; consider increasing font size.
  • All lighter shades will require dark text to meet WCAG AA standards.
  • Ensure interactive elements using lighter blues have clear hover/focus states to distinguish them.

Recommended combinations

Icy Clarity

Excellent for high-readability interfaces, with a bright background and clear blue for text and elements.

#EFF7F8 · #86B2C0 · #A7CAD7

Glade Layers

Ideal for subtle layered cards, background sections, or creating gentle visual depth.

#DAF0F5 · #C6E0E6 · #A7CAD7

Deep Mist

Useful for hero banners or feature blocks, using #EFF7F8 as a base with #A7CAD7 and #86B2C0 for content.

#EFF7F8 · #A7CAD7 · #86B2C0

CSS variables

:root {
  --frosty-winter-glade-2-1: #A7CAD7;
  --frosty-winter-glade-2-2: #C6E0E6;
  --frosty-winter-glade-2-3: #DAF0F5;
  --frosty-winter-glade-2-4: #EFF7F8;
  --frosty-winter-glade-2-5: #86B2C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosty-winter-glade-2": {
        1: "#A7CAD7",
        2: "#C6E0E6",
        3: "#DAF0F5",
        4: "#EFF7F8",
        5: "#86B2C0",
      }
    }
  }
}

Related searches

icy blue white paletteserene winter UI colorscalm glade aestheticlight blue minimalist designethereal winter branding

Palette colors

Hex values

Color 1#A7CAD7
·
Color 2#C6E0E6
·
Color 3#DAF0F5
·
Color 4#EFF7F8
·
Color 5#86B2C0
·

Accessibility

Contrast checker

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

Similar palettes

More like Frosty Winter Glade

View all cool