Palette

Berry Winter Hearth

A warm yet crisp palette, combining deep berry reds with soft snowy blues, reminiscent of winter comfort.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Berry Winter Hearth 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 Berry Winter Hearth.

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

Data visualization

#8B0000#DC143C#F0F8FF#ADD8E6#B0E0E6

Palette guide

How to use Berry Winter Hearth

Overview

The Berry Winter Hearth palette offers a beautiful blend of warmth and crispness, perfect for evocative seasonal designs. Anchored by deep berry reds like #8B0000 and the vibrant #DC143C, it evokes festive coziness. These are elegantly balanced by the soft, snowy blues of #F0F8FF, #ADD8E6, and #B0E0E6. This combination creates a comforting yet refreshing aesthetic, reminiscent of a crackling fire against a snowy landscape. Designers can leverage its inviting mood for projects that require a touch of winter charm or holiday spirit, ensuring a sophisticated and memorable visual experience.

Best used for

Holiday and festive branding
Winter event invitations and decor
Cozy blog or website themes
Seasonal product packaging
Children's book illustrations
Digital art with a warm, crisp feel

Suggested color roles

primary

Use #8B0000 for strong, grounding elements like main headings or key call-to-action buttons, conveying deep warmth and stability.

secondary

Employ #DC143C for lively accents or secondary branding elements, adding a festive and energetic pop that complements the primary red.

accent

Apply #ADD8E6 as a cool, light highlight for interactive states, subtle icons, or decorative elements, providing a refreshing contrast.

background

Utilize #F0F8FF as a clean, airy base for content areas, offering excellent readability and a sense of open, snowy space.

text

For dark text, use #8B0000 or a dark charcoal against lighter backgrounds. For light text on dark reds, a crisp white works well.

Accessibility notes

Ensure sufficient contrast when using #DC143C for text on #F0F8FF; aim for WCAG AA or AAA.
Pair dark reds like #8B0000 with light blues such as #ADD8E6 for optimal readability in body text.
Avoid using light blue text on similar light blue backgrounds; always check contrast ratios.
Use #F0F8FF as a background for primary content to ensure high contrast with darker text colors.

Recommended combinations

Festive Contrast

Ideal for holiday cards or banners, pairing deep red with a snowy white and a vibrant accent.

#8B0000 · #F0F8FF · #DC143C

Winter Chill

Creates a serene, cool backdrop, perfect for winter landscape designs or soft UI elements.

#F0F8FF · #ADD8E6 · #B0E0E6

Cozy Hearth

Captures the essence of a warm fireside, suitable for inviting hero sections or cozy illustrations.

#DC143C · #8B0000 · #F0F8FF

CSS variables

:root {
  --berry-winter-hearth-1: #8B0000;
  --berry-winter-hearth-2: #DC143C;
  --berry-winter-hearth-3: #F0F8FF;
  --berry-winter-hearth-4: #ADD8E6;
  --berry-winter-hearth-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "berry-winter-hearth": {
        1: "#8B0000",
        2: "#DC143C",
        3: "#F0F8FF",
        4: "#ADD8E6",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#DC143C

Color 3#F0F8FF

Color 4#ADD8E6

Color 5#B0E0E6

Accessibility

Contrast checker

2:1Fail

9.3:1AAA

6.6:1AA

7:1AA

2:1Fail

4.7:1AA

3.3:1AA18

3.5:1AA18

9.3:1AAA

4.7:1AA

1.4:1Fail

1.3:1Fail