Palette

Frosted Woodland Serene

A crisp, cool palette of icy blues and muted greys, reflecting the peaceful quiet of a frosted winter forest.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Woodland Serene 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 Woodland Serene.

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

Data visualization

#3A4C5F#60798F#90A7BD#C2D5E6#EDF2F7

Palette guide

How to use Frosted Woodland Serene

Overview

The Frosted Woodland Serene palette captures the quiet majesty of a winter forest with its deep, cool greys and subtle blue undertones. Ranging from the profound #3A4C5F to the airy #EDF2F7, this palette offers a sophisticated gradient that evokes calmness and professionalism. Shades like #60798F, #90A7BD, and #C2D5E6 provide ample opportunity for creating depth and visual hierarchy within a cohesive, muted scheme. This palette is ideal for designers and developers seeking to convey stability, elegance, and a connection to natural, yet refined, environments, making it suitable for corporate branding, sophisticated web interfaces, or tranquil digital experiences.

Best used for

Corporate and professional branding
Luxury product websites
High-end editorial design
Architectural visualization
Calm and sophisticated UI/UX
Winter-themed photography portfolios

Suggested color roles

primary

Utilize #60798F as a dominant color for main sections or branding elements, establishing a strong yet serene presence.

secondary

Employ #90A7BD for supporting content areas, sub-headers, or background textures, providing a lighter, complementary tone.

accent

Reserve #3A4C5F for high-impact accents like navigation, important icons, or footers, offering significant depth and grounding.

background

Use #EDF2F7 or #C2D5E6 for clean, expansive backgrounds, creating a light and airy base that allows other colors to stand out.

text

For optimal readability, use #3A4C5F for body text and headings on lighter backgrounds. For text on #3A4C5F, a crisp white or #EDF2F7 is recommended.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter shades like #C2D5E6 on #EDF2F7.
The darker shades #3A4C5F and #60798F provide excellent contrast for text on the light backgrounds, meeting WCAG standards.
Avoid using #90A7BD for small text on similar light backgrounds to prevent readability issues.
Always verify color contrast ratios for all text and interactive elements to ensure accessibility for all users.

Recommended combinations

Forest Mist

Ideal for light, ethereal backgrounds and subtle gradients, creating a sense of openness and tranquility.

#EDF2F7 · #C2D5E6 · #90A7BD

Deep Woods

Excellent for primary content blocks, navigation, or strong accents, providing depth and a professional feel.

#3A4C5F · #60798F · #C2D5E6

Serene Path

Suitable for card components, section headers, or illustrations that require a harmonious progression of cool greys.

#90A7BD · #60798F · #3A4C5F

CSS variables

:root {
  --frosted-woodland-serene-1: #3A4C5F;
  --frosted-woodland-serene-2: #60798F;
  --frosted-woodland-serene-3: #90A7BD;
  --frosted-woodland-serene-4: #C2D5E6;
  --frosted-woodland-serene-5: #EDF2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-woodland-serene": {
        1: "#3A4C5F",
        2: "#60798F",
        3: "#90A7BD",
        4: "#C2D5E6",
        5: "#EDF2F7",
      }
    }
  }
}

Hex values

Color 1#3A4C5F

Color 2#60798F

Color 3#90A7BD

Color 4#C2D5E6

Color 5#EDF2F7

Accessibility

Contrast checker

1.9:1Fail

3.6:1AA18

5.9:1AA

7.8:1AAA

1.9:1Fail

1.8:1Fail

3:1AA18

4:1AA18

3.6:1AA18

1.8:1Fail

1.7:1Fail

2.2:1Fail

5.9:1AA

3:1AA18

1.7:1Fail

1.3:1Fail

7.8:1AAA

4:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Frosted Woodland Serene

Frosted Juniper Berries

Frosted Winter Branches

Frosty Winter Bloom