Back to palettes

Palette

Charcoal Smoke Hues

A range of smoky greys that emulate the shifting tones of charcoal and drifting smoke.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Charcoal Smoke Hues 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 Charcoal Smoke Hues.

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

Data visualization

#36454F#708090#2C3942#8798A6#4C5B67

Palette guide

How to use Charcoal Smoke Hues

Overview

The Charcoal Smoke Hues palette offers a moody and sophisticated range of smoky greys, emulating the shifting tones of charcoal and drifting smoke. This collection features deep, enigmatic shades like #2C3942 and #36454F, transitioning through cooler mid-tones such as #4C5B67 and #708090, and reaching a lighter, ethereal #8798A6. For designers and developers, this palette is perfect for creating atmospheric, modern, and industrial-inspired designs. It provides an excellent foundation for projects that require depth, intrigue, and a cool, understated elegance, allowing for subtle visual hierarchy and a captivating user experience.

Best used for

  • Industrial design and manufacturing websites
  • Luxury tech or automotive branding
  • Dark-themed UI/UX for professional applications
  • Photography portfolios with a dramatic flair
  • Film and media production branding
  • Modern architectural visualization

Suggested color roles

primary

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

secondary

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

accent

Apply #708090 for delicate interactive elements, borders, or to highlight secondary information with a cool touch.

background

Choose #2C3942 or #36454F for a deep, atmospheric background, or #8798A6 for lighter section breaks.

text

For dark backgrounds, use #8798A6 or #708090 for excellent readability. On light backgrounds like #8798A6, #2C3942 is ideal for all text.

Accessibility notes

  • Ensure #8798A6 text on #2C3942 background meets WCAG contrast standards for body text.
  • Avoid using #4C5B67 text on #708090 backgrounds for small text, as contrast may be insufficient.
  • Use #36454F for headings and important information on #8798A6 backgrounds for strong readability.
  • Test interactive elements with #708090 against adjacent darker tones to ensure sufficient visual distinction.

Recommended combinations

Smoky Depths

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

#2C3942 · #8798A6 · #36454F

Hazy Layers

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

#36454F · #4C5B67 · #708090

Cool Contrast

Use #2C3942 for strong visual elements on an #8798A6 canvas, with #4C5B67 for delicate details or lines.

#8798A6 · #2C3942 · #4C5B67

CSS variables

:root {
  --charcoal-smoke-hues-1: #36454F;
  --charcoal-smoke-hues-2: #708090;
  --charcoal-smoke-hues-3: #2C3942;
  --charcoal-smoke-hues-4: #8798A6;
  --charcoal-smoke-hues-5: #4C5B67;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-smoke-hues": {
        1: "#36454F",
        2: "#708090",
        3: "#2C3942",
        4: "#8798A6",
        5: "#4C5B67",
      }
    }
  }
}

Related searches

smoky grey color palettedark moody UI colorsindustrial charcoal schemecool neutral brandingatmospheric grey tones

Palette colors

Hex values

Color 1#36454F
·
Color 2#708090
·
Color 3#2C3942
·
Color 4#8798A6
·
Color 5#4C5B67
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
1.2:1Fail
3.3:1AA18
1.4:1Fail
2
2.4:1Fail
2.9:1Fail
1.4:1Fail
1.7:1Fail
3
1.2:1Fail
2.9:1Fail
4:1AA18
1.7:1Fail
4
3.3:1AA18
1.4:1Fail
4:1AA18
2.4:1Fail
5
1.4:1Fail
1.7:1Fail
1.7:1Fail
2.4:1Fail

Similar palettes

More like Charcoal Smoke Hues

View all monochrome
Charred Hearth Smoke
Gothic Cathedral Stone
Gothic Stone Hearth
Gritty Factory Floor
Gritty Industrial Grey
Industrial Gear Grind