Palette

Frost Branch Serene

Muted blues and grays capture the quiet, peaceful beauty of a snowy forest on a cold winter day.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Frost Branch 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 Frost Branch Serene.

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

Data visualization

#9FAEB2#C4D3D7#E8F0F3#6F7F83#4C5F63

Palette guide

How to use Frost Branch Serene

Overview

The Frost Branch Serene palette captures the quiet elegance of a snowy forest, featuring muted blues and grays for a tranquil and sophisticated aesthetic. This collection includes a versatile cadet gray (#9FAEB2), a soft light gray-blue (#C4D3D7), a very light blue-gray (#E8F0F3), a deeper gray-blue (#6F7F83), and a grounding deep gray-blue (#4C5F63). It's an excellent choice for designers and developers aiming for a minimalist, professional, or nature-inspired look, providing a sense of calm and understated luxury across various digital and print applications.

Best used for

Corporate and professional websites
Minimalist branding and identity
Nature photography portfolios
Serene interior design concepts
High-end product packaging
Professional documentation and reports

Suggested color roles

primary

Utilize #4C5F63 as the foundational color for strong branding, main text, and powerful call-to-actions.

secondary

Apply #6F7F83 for supportive elements, subheadings, or background sections that need more depth than lighter tones.

accent

Employ #9FAEB2 for subtle highlights, interactive states, or decorative elements, adding a gentle contrast.

background

Use #E8F0F3 as a clean, unobtrusive canvas, providing a sense of spaciousness and calm.

text

For body text, #4C5F63 or a deep charcoal offers excellent readability on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for all text, especially on the very light background #E8F0F3, using darker palette colors or black.
Text on #C4D3D7 will require a dark color (e.g., #4C5F63) for optimal readability.
Use #4C5F63 or #6F7F83 for important interactive elements to ensure visibility.
Be mindful of placing #C4D3D7 and #E8F0F3 directly next to each other for critical information due to low contrast.

Recommended combinations

Deep Serenity

For core brand identity, headlines, and primary content sections requiring gravitas.

#4C5F63 · #6F7F83 · #E8F0F3

Gentle Branch

Ideal for subtler sections, secondary information, or soft background patterns.

#9FAEB2 · #C4D3D7 · #E8F0F3

Winter Forest

Effective for data visualizations, layered UI elements, or depicting natural textures.

#6F7F83 · #9FAEB2 · #C4D3D7

CSS variables

:root {
  --frost-branch-serene-1: #9FAEB2;
  --frost-branch-serene-2: #C4D3D7;
  --frost-branch-serene-3: #E8F0F3;
  --frost-branch-serene-4: #6F7F83;
  --frost-branch-serene-5: #4C5F63;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "frost-branch-serene": {
        1: "#9FAEB2",
        2: "#C4D3D7",
        3: "#E8F0F3",
        4: "#6F7F83",
        5: "#4C5F63",
      }
    }
  }
}

Hex values

Color 1#9FAEB2

Color 2#C4D3D7

Color 3#E8F0F3

Color 4#6F7F83

Color 5#4C5F63

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

1.8:1Fail

2.9:1Fail

1.5:1Fail

1.3:1Fail

2.7:1Fail

4.4:1AA18

2:1Fail

1.3:1Fail

3.6:1AA18

5.8:1AA

1.8:1Fail

2.7:1Fail

3.6:1AA18

1.6:1Fail

2.9:1Fail

4.4:1AA18

5.8:1AA

1.6:1Fail

Similar palettes

More like Frost Branch Serene

View all cool

Frosted Winter Branches