Palette

Charred Hearth Smoke

A somber, atmospheric palette of deep greys, mimicking the subtle tones of dying embers and wisps of smoke.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4F4F4F#727272#979797#BCBCBC

Palette guide

How to use Charred Hearth Smoke

Overview

The Charred Hearth Smoke palette is a somber, atmospheric collection of deep greys, mimicking the subtle tones of dying embers and wisps of smoke. Ranging from the profound #2C2C2C to the soft #BCBCBC, with balanced mid-tones such as #4F4F4F, #727272, and #979797, this palette offers exceptional depth for designers and developers. It's an ideal choice for projects aiming to evoke a sense of quiet contemplation, rustic warmth, or understated drama. This monochromatic scheme provides a strong visual hierarchy and a professional atmosphere, perfect for interfaces, branding, or content where a moody yet refined aesthetic is desired.

Best used for

Rustic and vintage-inspired branding
Coffee shop or craft brewery websites
Photography portfolios with a moody aesthetic
E-commerce for handcrafted goods
Dark mode UI/UX themes with warmth
Editorial design for literary or historical content

Suggested color roles

primary

Utilize #2C2C2C as the foundational color for main backgrounds, navigation, and primary branding elements.

secondary

Employ #4F4F4F for major content blocks, prominent headers, or to provide subtle visual separation.

accent

Apply #979797 for delicate interactive elements, borders, or to highlight secondary information without stark contrast.

background

Choose #2C2C2C for a deep, atmospheric background, or #BCBCBC for lighter, spacious sections.

text

For dark backgrounds, use #BCBCBC or #979797 for excellent readability. On light backgrounds like #BCBCBC, #2C2C2C is ideal for all text.

Accessibility notes

Ensure #BCBCBC text on #2C2C2C background meets WCAG contrast standards for body text.
Avoid using #727272 text on #979797 backgrounds for small text, as contrast may be insufficient.
Use #4F4F4F for headings and important information on #BCBCBC backgrounds for strong readability.
Test interactive elements with #979797 against adjacent darker tones to ensure sufficient visual distinction.

Recommended combinations

Hearth Contrast

Ideal for main content areas: dark background, light text, and a slightly lighter dark for subheadings.

#2C2C2C · #BCBCBC · #4F4F4F

Smoke Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking smoke and ash.

#4F4F4F · #727272 · #979797

Muted Read

Use #2C2C2C for strong visual elements on a #BCBCBC canvas, with #727272 for delicate details or lines.

#BCBCBC · #2C2C2C · #727272

CSS variables

:root {
  --charred-hearth-smoke-1: #2C2C2C;
  --charred-hearth-smoke-2: #4F4F4F;
  --charred-hearth-smoke-3: #727272;
  --charred-hearth-smoke-4: #979797;
  --charred-hearth-smoke-5: #BCBCBC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charred-hearth-smoke": {
        1: "#2C2C2C",
        2: "#4F4F4F",
        3: "#727272",
        4: "#979797",
        5: "#BCBCBC",
      }
    }
  }
}

Hex values

Color 1#2C2C2C

Color 2#4F4F4F

Color 3#727272

Color 4#979797

Color 5#BCBCBC

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

4.8:1AA

7.4:1AAA

1.7:1Fail

2.8:1Fail

4.3:1AA18

2.9:1Fail

1.7:1Fail

1.6:1Fail

2.5:1Fail

4.8:1AA

2.8:1Fail

1.6:1Fail

1.5:1Fail

7.4:1AAA

4.3:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Charred Hearth Smoke

Charred Hearth Smoke

See it in context.

Ready when you are.

Built with Charred Hearth Smoke.

How to use Charred Hearth Smoke

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Hearth Contrast

Smoke Layers

Muted Read

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Charred Hearth Smoke