Palette

Nordic Winter Hearth

Cool, soothing blues and grays bring to mind cozy winter evenings by a stone hearth in a minimalist Nordic home.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4A5D6F#6D8AA0#9EBEC9#CCDCE2#DFEDF2

Palette guide

How to use Nordic Winter Hearth

Overview

The Nordic Winter Hearth palette evokes the cozy, soothing blues and grays of winter evenings by a stone hearth in a minimalist Nordic home. This collection is perfect for designers and developers aiming for a warm yet cool, comforting aesthetic with a touch of modern simplicity. It features a gradient of inviting tones, from the deep blue-gray #4A5D6F to the lighter, ethereal #DFEDF2, with versatile mid-tones like #6D8AA0 and #9EBEC9. This palette masterfully balances cool elegance with a sense of grounded comfort, making it ideal for creating inviting user interfaces, warm brand identities, or serene digital experiences that speak to coziness and understated sophistication.

Best used for

Interior design inspiration websites and blogs
Cozy lifestyle and home goods e-commerce
Winter holiday promotions and seasonal branding
Sustainable and ethical brand identities
Calm and comforting user interfaces for apps
Minimalist personal blogs and portfolios

Suggested color roles

primary

Use #6D8AA0 as a comforting and versatile primary color for main content areas or key UI elements, providing a balanced presence.

secondary

Employ #4A5D6F for supporting text, subheadings, or darker sections, offering depth and a strong grounding effect.

accent

Reserve #9EBEC9 for subtle highlights, interactive states, or decorative elements, adding a touch of lightness and charm.

background

Utilize #DFEDF2 as the main background, providing a soft, almost white canvas that feels both fresh and subtly warm.

text

For optimal readability, use #4A5D6F for body text and headings on light backgrounds. For lighter text on darker elements, a crisp white is highly effective.

Accessibility notes

Ensure #4A5D6F on #DFEDF2 provides good contrast for body text, typically meeting WCAG AA standards.
Verify that #6D8AA0 on #DFEDF2 is suitable for larger text and headers, maintaining good legibility.
Be cautious when using #9EBEC9 on #DFEDF2 for small or critical text, as contrast may be insufficient.
Interactive elements should have clear visual feedback for hover and focus states, perhaps using #4A5D6F for outlines or fills.

Recommended combinations

Hearthstone

A strong header (#4A5D6F) on a soft background (#DFEDF2), with #6D8AA0 for secondary information or decorative borders.

#4A5D6F · #DFEDF2 · #6D8AA0

Cozy Glow

Ideal for highlighting sections where #9EBEC9 draws attention against #DFEDF2, with #6D8AA0 for accompanying text.

#9EBEC9 · #DFEDF2 · #6D8AA0

Deep Comfort

Combines a comforting primary (#6D8AA0) with a light accent (#CCDCE2) and a deep grounding shade (#4A5D6F) for depth.

#6D8AA0 · #CCDCE2 · #4A5D6F

CSS variables

:root {
  --nordic-winter-hearth-1: #4A5D6F;
  --nordic-winter-hearth-2: #6D8AA0;
  --nordic-winter-hearth-3: #9EBEC9;
  --nordic-winter-hearth-4: #CCDCE2;
  --nordic-winter-hearth-5: #DFEDF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-hearth": {
        1: "#4A5D6F",
        2: "#6D8AA0",
        3: "#9EBEC9",
        4: "#CCDCE2",
        5: "#DFEDF2",
      }
    }
  }
}

Hex values

Color 1#4A5D6F

Color 2#6D8AA0

Color 3#9EBEC9

Color 4#CCDCE2

Color 5#DFEDF2

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

4.8:1AA

5.7:1AA

1.9:1Fail

1.8:1Fail

2.6:1Fail

3:1AA18

3.5:1AA18

1.8:1Fail

1.4:1Fail

1.6:1Fail

4.8:1AA

2.6:1Fail

1.4:1Fail

1.2:1Fail

5.7:1AA

3:1AA18

1.6:1Fail

1.2:1Fail

Similar palettes

More like Nordic Winter Hearth

View all cool

Berry Winter Hearth

Winter Hearth Frost

Alpine Frost Serenity

Arctic Fox Pelt

Fjorden Mist Calm

Fjords Ice Chill