Palette

Frosted Winter Branches

Cool, crisp hues reflecting a serene winter landscape, with icy blues and snow-dusted branches.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CDE0EE#DCEBF5#AEC0CC#4A6C7C#7C786A

Palette guide

How to use Frosted Winter Branches

Overview

The Frosted Winter Branches palette captures the serene beauty of a winter landscape, blending cool blues and greys with a subtle touch of earthy warmth. It features light, ethereal blues like #CDE0EE (Light Steel Blue) and #DCEBF5 (Powder Blue) that evoke fresh snow. These are grounded by the muted #AEC0CC (Cadet Grey) and the deep, anchoring #4A6C7C (Dark Slate Gray), reminiscent of winter branches. A unique addition is #7C786A (Sage Green), offering a hint of frosted foliage. This palette is ideal for designs aiming for a tranquil, sophisticated, and natural aesthetic, reflecting the quiet elegance of winter.

Best used for

Nature-inspired branding or websites
Winter travel or outdoor activity promotions
Editorial design for environmental themes
Home decor or interior design concepts
Calm, professional corporate branding
Digital interfaces seeking a soothing, natural feel

Suggested color roles

primary

A deep, grounding color for prominent text, navigation, or strong visual anchors. #4A6C7C provides excellent contrast.

secondary

A softer, yet defined blue-grey like #AEC0CC for sub-headings, secondary buttons, or larger background sections.

accent

The subtle warmth of #7C786A can be used for small decorative elements, icons, or to add a hint of natural texture.

background

The lightest hues, #CDE0EE or #DCEBF5, create an expansive, frosty canvas perfect for main content areas.

text

For dark text on light backgrounds, use #4A6C7C. For light text on darker backgrounds, #CDE0EE offers good readability.

Accessibility notes

Ensure that text against the lighter blues (#CDE0EE, #DCEBF5) uses a dark color like #4A6C7C for readability.
Avoid using #AEC0CC for small text on #CDE0EE or #DCEBF5 as contrast will be insufficient.
The #7C786A (Sage Green) might require careful contrast checking when paired with lighter blues for text.
Always verify WCAG contrast ratios, especially for body text and interactive elements.

Recommended combinations

Winter Sky

Creates a soft, ethereal background, perfect for serene and spacious layouts.

#CDE0EE · #DCEBF5 · #AEC0CC

Frosted Branches

Highlights natural textures with deep tones against a light, frosty blue background.

#4A6C7C · #7C786A · #CDE0EE

Calm Serenity

A balanced combination for clear hierarchy and a sophisticated, calm appearance.

#AEC0CC · #4A6C7C · #DCEBF5

CSS variables

:root {
  --frosted-winter-branches-1: #CDE0EE;
  --frosted-winter-branches-2: #DCEBF5;
  --frosted-winter-branches-3: #AEC0CC;
  --frosted-winter-branches-4: #4A6C7C;
  --frosted-winter-branches-5: #7C786A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-winter-branches": {
        1: "#CDE0EE",
        2: "#DCEBF5",
        3: "#AEC0CC",
        4: "#4A6C7C",
        5: "#7C786A",
      }
    }
  }
}

Hex values

Color 1#CDE0EE

Color 2#DCEBF5

Color 3#AEC0CC

Color 4#4A6C7C

Color 5#7C786A

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

4.2:1AA18

3.3:1AA18

1.1:1Fail

1.5:1Fail

4.6:1AA

3.6:1AA18

1.4:1Fail

1.5:1Fail

3:1AA18

2.4:1Fail

4.2:1AA18

4.6:1AA

3:1AA18

1.3:1Fail

3.3:1AA18

3.6:1AA18

2.4:1Fail

1.3:1Fail

Similar palettes

More like Frosted Winter Branches