Palette

Winter Glade

Icy blues and grays evoke the quiet chill and stark beauty of a snow-covered winter forest.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#E6E6FA#B0C4DE#708090#2F4F4F

Palette guide

How to use Winter Glade

Overview

The Winter Glade palette evokes the serene and stark beauty of a snow-covered winter forest with its icy blues and deep grays. This collection, transitioning from the near-white #F0F8FF to the profound #2F4F4F, offers a sophisticated and calming aesthetic. The muted mid-tones like #B0C4DE and #708090 provide excellent versatility for layering and creating depth, making it ideal for designs that require a sense of quiet elegance and composure. Designers can use this palette to craft visually soothing interfaces, brand identities, or editorial layouts that communicate professionalism and tranquility.

Best used for

Luxury brand websites
Minimalist UI/UX design
Winter-themed photography
Corporate annual reports
High-end fashion branding
Serene home decor applications

Suggested color roles

primary

Use #2F4F4F for strong headings, primary calls to action, or main brand elements to establish a profound and stable presence.

secondary

Ideal for subheadings, secondary buttons, or larger content blocks using #708090, offering a sophisticated contrast.

accent

A soft, cool accent using #B0C4DE for interactive elements, subtle highlights, or delicate graphical details.

background

Provides an extremely light, clean canvas with #F0F8FF that allows darker elements to stand out crisply.

text

Excellent for main body text using #2F4F4F, ensuring high readability against light backgrounds like #F0F8FF or #E6E6FA.

Accessibility notes

Ensure #2F4F4F text on #F0F8FF or #E6E6FA backgrounds meets WCAG AA contrast ratios.
Avoid using #B0C4DE for small text directly on #E6E6FA as contrast may be insufficient.
Use a contrast checker for all text and interactive element pairings to guarantee legibility.
Consider slightly darker text (e.g., charcoal) if placing on #B0C4DE to improve readability.

Recommended combinations

Forest Depth

High-contrast combination for primary content, providing strong readability and elegance.

#2F4F4F · #F0F8FF · #708090

Misty Layers

Creates a soft, layered effect, ideal for backgrounds or subtle UI gradients.

#E6E6FA · #B0C4DE · #708090

Icy Elegance

A clean and sophisticated pairing for headers or sections where light and dark elements meet.

#F0F8FF · #B0C4DE · #2F4F4F

CSS variables

:root {
  --winter-glade-1: #F0F8FF;
  --winter-glade-2: #E6E6FA;
  --winter-glade-3: #B0C4DE;
  --winter-glade-4: #708090;
  --winter-glade-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-glade": {
        1: "#F0F8FF",
        2: "#E6E6FA",
        3: "#B0C4DE",
        4: "#708090",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E6E6FA

Color 3#B0C4DE

Color 4#708090

Color 5#2F4F4F

Accessibility

Contrast checker

1.1:1Fail

1.7:1Fail

3.8:1AA18

8.3:1AAA

1.1:1Fail

1.4:1Fail

3.3:1AA18

7.3:1AAA

1.7:1Fail

1.4:1Fail

2.3:1Fail

5:1AA

3.8:1AA18

3.3:1AA18

2.3:1Fail

2.2:1Fail

8.3:1AAA

7.3:1AAA

5:1AA

2.2:1Fail

Similar palettes

More like Winter Glade

Evergreen Snowfall Chill