Palette

Frosted Forest Path

Deep, cool blues and crisp whites mirror a tranquil forest path, blanketed in a delicate layer of winter frost.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frosted Forest Path 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 Forest Path.

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

Data visualization

#2F4858#4E6C7D#7BA1B7#ADD7E8#E0EFF7

Palette guide

How to use Frosted Forest Path

Overview

The Frosted Forest Path palette evokes the serene beauty of a winter landscape, offering a cool, tranquil spectrum ideal for digital and print designs. This cohesive collection transitions from the deep, anchoring #2F4858 (a dark slate blue) to the ethereal lightness of #E0EFF7 (a crisp, near-white frost). Intermediate shades like #4E6C7D, #7BA1B7, and #ADD7E8 provide a smooth gradient, perfect for creating depth and visual interest. Designers can leverage this palette to achieve a sophisticated, calming aesthetic, whether for branding, UI/UX, or illustrative projects. Its cool undertones lend a sense of professionalism and clarity, making it highly versatile for various applications seeking a peaceful yet impactful presence.

Best used for

Corporate websites and branding for calm, professional services
Winter-themed marketing materials and holiday campaigns
UI/UX design for meditation or wellness apps
Nature-inspired photography portfolios or blogs
Interior design concepts for serene living spaces
Digital art and illustration seeking a cool, muted tone

Suggested color roles

primary

#2F4858 - Use this deep, anchoring slate blue for strong headings, primary buttons, or significant brand elements where gravitas and stability are desired.

secondary

#4E6C7D - A versatile mid-tone blue, excellent for subheadings, secondary calls to action, or larger content blocks to maintain a cohesive cool theme.

accent

#ADD7E8 - This bright, icy blue provides a crisp contrast, perfect for interactive elements, highlights, or subtle design flourishes that need to pop without being overly bold.

background

#E0EFF7 - An almost-white, ethereal shade, ideal for clean, spacious backgrounds that allow other colors and content to breathe.

text

#2F4858 - For primary body text to ensure high readability against light backgrounds like #E0EFF7. For smaller text or less crucial information, a slightly lighter shade like #4E6C7D could be used.

Accessibility notes

Ensure sufficient contrast between #2F4858 or #4E6C7D and #E0EFF7 for body text.
Text in #ADD7E8 or #7BA1B7 against #E0EFF7 will likely fail WCAG AA contrast ratios and should be avoided for crucial information.
Use #2F4858 for interactive elements to ensure clear visibility and clickability against lighter backgrounds.
Consider a slightly darker charcoal or black for very small text if #2F4858 feels too light for certain contexts.

Recommended combinations

Winter Depth

Excellent for high-contrast branding, where the deep blue anchors the design, and the light blue provides clean space.

#2F4858 · #4E6C7D · #E0EFF7

Icy Tranquility

Creates a soft, ethereal feel, ideal for backgrounds, subtle gradients, or decorative elements.

#7BA1B7 · #ADD7E8 · #E0EFF7

Forest Path

A balanced combination for headers, sub-headers, and content blocks, offering clear hierarchy.

#2F4858 · #ADD7E8 · #4E6C7D

CSS variables

:root {
  --frosted-forest-path-1: #2F4858;
  --frosted-forest-path-2: #4E6C7D;
  --frosted-forest-path-3: #7BA1B7;
  --frosted-forest-path-4: #ADD7E8;
  --frosted-forest-path-5: #E0EFF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frosted-forest-path": {
        1: "#2F4858",
        2: "#4E6C7D",
        3: "#7BA1B7",
        4: "#ADD7E8",
        5: "#E0EFF7",
      }
    }
  }
}

Hex values

Color 1#2F4858

Color 2#4E6C7D

Color 3#7BA1B7

Color 4#ADD7E8

Color 5#E0EFF7

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

6.2:1AA

8.2:1AAA

1.7:1Fail

2:1Fail

3.6:1AA18

4.7:1AA

3.5:1AA18

2:1Fail

1.8:1Fail

2.3:1Fail

6.2:1AA

3.6:1AA18

1.8:1Fail

1.3:1Fail

8.2:1AAA

4.7:1AA

2.3:1Fail

1.3:1Fail

Similar palettes

More like Frosted Forest Path

View all cool

Evergreen Snowfall Chill

Frost Kissed Pine

Frosted Alpine Peak

Frosted Juniper Berry

Frozen Forest Dawn

Nordic Spruce Forest