Palette

Winter Hearth Smoke

Subtle shades of grey, mirroring the quiet whispers of smoke from a cozy winter hearth.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#708090#A9A9A9#D3D3D3#E6E6E6

Palette guide

How to use Winter Hearth Smoke

Overview

The Winter Hearth Smoke palette captures the quiet whispers of smoke from a cozy winter hearth with its subtle shades of gray. This monochrome collection transitions from the deep, grounding #36454F to the airy #E6E6E6, offering a sophisticated and calming aesthetic. The versatile mid-tones like #708090 and #A9A9A9 provide excellent depth and subtle variation, making it ideal for designs that require a sense of understated elegance, professionalism, and composure. Designers can leverage this palette to craft visually soothing interfaces, minimalist brand identities, or editorial layouts that communicate sophistication and tranquility.

Best used for

Corporate websites and branding
Minimalist UI/UX design
Architectural visualizations
Luxury product packaging
Editorial design for professional content
Tech and software interfaces

Suggested color roles

primary

Use #36454F for strong headers, primary calls to action, or core brand elements to establish a solid, dependable presence.

secondary

Ideal for subheadings, secondary buttons, or larger content blocks using #708090, offering a sophisticated, medium gray.

accent

A versatile accent using #A9A9A9 for interactive elements, subtle highlights, or graphical details that need a soft lift.

background

Provides a very light, clean canvas with #E6E6E6 that allows darker elements to stand out crisply.

text

Excellent for main body text using #36454F on light backgrounds like #E6E6E6, ensuring strong readability.

Accessibility notes

Ensure #36454F text on #E6E6E6 background meets WCAG AA contrast for optimal readability.
Avoid using #A9A9A9 or #D3D3D3 for small text against similarly light backgrounds.
Use a contrast checker for all text and interactive element pairings to guarantee legibility.
For text on darker backgrounds like #36454F, use #E6E6E6 or #D3D3D3 for sufficient contrast.

Recommended combinations

Smoke & Ash

High-contrast combination for primary content, providing strong readability and a modern feel.

#36454F · #E6E6E6 · #708090

Misty Layers

Creates a soft, layered effect, ideal for backgrounds or subtle UI gradients, evoking smoke.

#D3D3D3 · #A9A9A9 · #708090

Hearth Glow

A clean and sophisticated pairing for headers or sections where light and dark elements meet.

#36454F · #E6E6E6 · #A9A9A9

CSS variables

:root {
  --winter-hearth-smoke-1: #36454F;
  --winter-hearth-smoke-2: #708090;
  --winter-hearth-smoke-3: #A9A9A9;
  --winter-hearth-smoke-4: #D3D3D3;
  --winter-hearth-smoke-5: #E6E6E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-hearth-smoke": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#E6E6E6",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#E6E6E6

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

6.6:1AA

7.9:1AAA

2.4:1Fail

1.7:1Fail

2.7:1Fail

3.2:1AA18

4.2:1AA18

1.7:1Fail

1.6:1Fail

1.9:1Fail

6.6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

7.9:1AAA

3.2:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Winter Hearth Smoke