Palette

Smoky Charcoal Grill

A sophisticated grayscale, mirroring the subtle hues of smoldering charcoal and smoke.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Charcoal Grill 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 Smoky Charcoal Grill.

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

Data visualization

#36454F#5D6D7E#7B8B9B#2C3842#475865

Palette guide

How to use Smoky Charcoal Grill

Overview

The Smoky Charcoal Grill palette offers a sophisticated grayscale, mirroring the subtle hues of smoldering charcoal and smoke. With a range from the deep #2C3842 (Very Dark Charcoal) to the softer #7B8B9B (Steel Blue/Light Gray-Blue), this monochrome collection provides a modern and minimal aesthetic. Designers and developers can leverage these tones, including #36454F (Charcoal Gray) and #475865 (Dark Gray-Blue), to create professional, understated, and highly versatile interfaces or branding materials that exude calm and efficiency without sacrificing depth.

Best used for

Corporate or minimalist website designs
Tech product interfaces and dashboards
Architectural portfolios and presentations
Branding for upscale industrial or modern services
Dark mode UI for professional applications
Editorial layouts requiring subtle sophistication

Suggested color roles

primary

#36454F acts as a robust, foundational color, suitable for primary backgrounds or large content blocks.

secondary

#475865 provides a slightly lighter, complementary shade, ideal for secondary panels, cards, or subtle divisions.

accent

#7B8B9B serves as a gentle accent, perfect for subtle highlights, interactive states, or decorative lines.

background

Utilize #2C3842 for a deep, refined canvas, providing excellent contrast for lighter text and elements.

text

#7B8B9B works well for body text on the darkest backgrounds. For headings, #5D6D7E can offer a slightly more pronounced presence on #2C3842.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #7B8B9B on medium grays like #5D6D7E.
The darkest colors, #2C3842 and #36454F, require a significantly lighter text color (e.g., white or #7B8B9B) for readability.
Avoid using adjacent grays like #36454F and #475865 for text/background combinations, as contrast may be insufficient.
This palette is excellent for creating depth, but always test text contrast rigorously with WCAG guidelines.

Recommended combinations

Deep Foundation

Establishes a solid, deep base with subtle variations, ideal for immersive dark mode themes or strong brand presence.

#2C3842 · #36454F · #475865

Subtle Contrast

Creates a harmonious transition from dark to light, suitable for layered UI elements or content separation.

#36454F · #5D6D7E · #7B8B9B

Grayscale Modern

Delivers a clean, contemporary look with clear visual hierarchy, perfect for minimalist interfaces.

#2C3842 · #475865 · #7B8B9B

CSS variables

:root {
  --smoky-charcoal-grill-1: #36454F;
  --smoky-charcoal-grill-2: #5D6D7E;
  --smoky-charcoal-grill-3: #7B8B9B;
  --smoky-charcoal-grill-4: #2C3842;
  --smoky-charcoal-grill-5: #475865;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-charcoal-grill": {
        1: "#36454F",
        2: "#5D6D7E",
        3: "#7B8B9B",
        4: "#2C3842",
        5: "#475865",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5D6D7E

Color 3#7B8B9B

Color 4#2C3842

Color 5#475865

Accessibility

Contrast checker

1.9:1Fail

2.8:1Fail

1.2:1Fail

1.3:1Fail

1.9:1Fail

1.5:1Fail

2.3:1Fail

1.4:1Fail

2.8:1Fail

1.5:1Fail

3.4:1AA18

2.1:1Fail

1.2:1Fail

2.3:1Fail

3.4:1AA18

1.6:1Fail

1.3:1Fail

1.4:1Fail

2.1:1Fail

1.6:1Fail

Similar palettes

More like Smoky Charcoal Grill

View all monochrome

Graphite Sketch

Abstract Canvas Swirl

Ancient Stone Rubble

Architectural Grid Hues

Art Gallery Minimal

Brushed Steel Aura