Palette

Winter Forest Pine

Chilly blues and deep greens evoke a serene winter forest, with snow-dusted pine trees.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#AFEEEE#2E8B57#2F4F4F#002F2F

Palette guide

How to use Winter Forest Pine

Overview

The "Winter Forest Pine" palette evokes the crisp, serene atmosphere of a snow-dusted evergreen forest. It combines icy blues like #E0FFFF and #AFEEEE with deep, grounding greens such as #2E8B57, #2F4F4F, and the very dark #002F2F. This palette offers developers a clear hierarchy for UI elements, allowing for strong contrasts and visual depth. Designers can utilize these colors for projects requiring a fresh, natural, and slightly chilly aesthetic, perfect for outdoor brands, environmental themes, or digital experiences that aim for a calming yet invigorating feel, ensuring a cohesive and impactful visual presence.

Best used for

Outdoor recreation or adventure brand identities
Environmental conservation websites or campaigns
Winter sports app interfaces
Packaging for refreshing beverages or natural products
Nature photography showcases
Educational materials on botany or ecology

Suggested color roles

primary

A very dark, almost black-green, #002F2F, ideal for strong branding, main headers, or crucial call-to-action buttons.

secondary

A deep, muted green, #2F4F4F, excellent for subheadings, navigation, or significant content blocks, adding depth.

accent

A vibrant medium green, #2E8B57, perfect for interactive elements, highlights, or graphical accents that need to pop.

background

A light, icy blue, #E0FFFF, providing a clean, expansive canvas that enhances readability and freshness.

text

The dark green #002F2F offers excellent contrast on #E0FFFF for body text, ensuring high legibility.

Accessibility notes

#E0FFFF provides strong contrast with #002F2F, #2F4F4F, and #2E8B57 for text, making it a reliable background.
#AFEEEE is a lighter blue; ensure sufficient contrast if used for text, especially against #E0FFFF.
Ensure all interactive elements have clear visual states with adequate contrast.
Always test color combinations against WCAG AA or AAA standards for optimal accessibility.

Recommended combinations

Deep Forest Ice

For strong, nature-inspired headers, footers, or sections demanding a rich, deep color presence.

#002F2F · #2F4F4F · #2E8B57

Winter Sky

Ideal for clean, open layouts, hero sections, or content areas requiring a light, refreshing background.

#E0FFFF · #AFEEEE · #2F4F4F

Pine Needle

Best for highlighting key information, interactive components, or illustrations that need a touch of natural vibrancy.

#2E8B57 · #2F4F4F · #AFEEEE

CSS variables

:root {
  --winter-forest-pine-1: #E0FFFF;
  --winter-forest-pine-2: #AFEEEE;
  --winter-forest-pine-3: #2E8B57;
  --winter-forest-pine-4: #2F4F4F;
  --winter-forest-pine-5: #002F2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-forest-pine": {
        1: "#E0FFFF",
        2: "#AFEEEE",
        3: "#2E8B57",
        4: "#2F4F4F",
        5: "#002F2F",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#AFEEEE

Color 3#2E8B57

Color 4#2F4F4F

Color 5#002F2F

Accessibility

Contrast checker

1.2:1Fail

4:1AA18

8.5:1AAA

13.8:1AAA

1.2:1Fail

3.3:1AA18

6.9:1AA

11.3:1AAA

4:1AA18

3.3:1AA18

2.1:1Fail

3.4:1AA18

8.5:1AAA

6.9:1AA

2.1:1Fail

1.6:1Fail

13.8:1AAA

11.3:1AAA

3.4:1AA18

1.6:1Fail

Similar palettes

More like Winter Forest Pine

View all cool

Frosted Forest Dawn

Evergreen Snowfall Chill

Frost Kissed Pine

Frosted Evergreen Haze

Frosted Evergreen Mist

Nordic Spruce Forest