Palette

Snowberry Frost

Icy whites and deep reds, like frosted snowberries clinging to snowy branches, crisp and serene.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#DCDCDC#FFC0CB#B22222#8B0000

Palette guide

How to use Snowberry Frost

Overview

The Snowberry Frost palette beautifully blends crisp, icy whites and cool greys with vibrant, deep reds, evoking the serene yet striking imagery of frosted winter berries. Featuring the near-white #F0F8FF and cool #DCDCDC, contrasted powerfully by the soft pink #FFC0CB and the rich reds #B22222 and #8B0000, this scheme offers a captivating balance. Designers and developers can leverage its contrasting elements to create festive, elegant, or even dramatic interfaces and branding. It's an ideal choice for projects seeking a blend of natural calm and bold, eye-catching accents, perfect for seasonal designs or sophisticated visual narratives.

Best used for

Winter holiday-themed websites and campaigns
Elegant cosmetic or fashion branding
Seasonal event promotions and invitations
Boutique retail product packaging
Editorial design with a classic, sophisticated feel
Festive digital advertisements and social media

Suggested color roles

primary

Use #F0F8FF as a clean, expansive background, creating a fresh and airy feel, reminiscent of snow.

secondary

Apply #DCDCDC for secondary backgrounds, subtle dividers, or card elements, offering a gentle contrast to white.

accent

Incorporate #B22222 for strong calls-to-action, important highlights, or decorative elements, providing a bold focal point.

background

Utilize #F0F8FF for a light, crisp base. Alternatively, #8B0000 can be used for dramatic, full-bleed sections with light text.

text

For light backgrounds, #8B0000 or black provides excellent contrast. For dark sections (e.g., #8B0000), use #F0F8FF or white.

Accessibility notes

Ensure #8B0000 text on #F0F8FF background meets WCAG AAA for exceptional readability.
Be cautious with #FFC0CB for text; it generally lacks sufficient contrast with light backgrounds like #F0F8FF.
Use #B22222 or #8B0000 for primary text on light backgrounds for strong contrast.
Avoid using #DCDCDC with #F0F8FF for text unless it's purely decorative and not essential information.

Recommended combinations

Festive Contrast

Perfect for holiday designs: #F0F8FF as a snowy background, #8B0000 for vibrant accents, and #DCDCDC for subtle details.

#F0F8FF · #8B0000 · #DCDCDC

Soft Elegance

Create a delicate, feminine look. #DCDCDC as a base, #FFC0CB for soft elements, and #B22222 for a touch of richness.

#DCDCDC · #FFC0CB · #B22222

Bold Statement

Use #8B0000 for a powerful background with #F0F8FF text, and #B22222 for complementary accents or buttons.

#8B0000 · #F0F8FF · #B22222

CSS variables

:root {
  --snowberry-frost-1: #F0F8FF;
  --snowberry-frost-2: #DCDCDC;
  --snowberry-frost-3: #FFC0CB;
  --snowberry-frost-4: #B22222;
  --snowberry-frost-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "snowberry-frost": {
        1: "#F0F8FF",
        2: "#DCDCDC",
        3: "#FFC0CB",
        4: "#B22222",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#DCDCDC

Color 3#FFC0CB

Color 4#B22222

Color 5#8B0000

Accessibility

Contrast checker

1.3:1Fail

1.4:1Fail

6.2:1AA

9.3:1AAA

1.3:1Fail

1.1:1Fail

4.9:1AA

7.3:1AAA