Back to palettes

Palette

Charcoal Smolder

A sophisticated collection of deep grays, reminiscent of smoldering embers and urban sophistication.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#4F5B66#6A737C#828A91#9DA4AA

Palette guide

How to use Charcoal Smolder

Overview

The Charcoal Smolder palette offers a sophisticated collection of deep greys, reminiscent of smoldering embers and urban sophistication. It ranges from the profound #36454F through increasingly lighter, yet still substantial, shades like #4F5B66, #6A737C, and #828A91, culminating in the soft #9DA4AA. This palette is a superb choice for designers and developers aiming for a minimalist, modern, and elegant aesthetic. It provides a robust foundation for establishing clear visual hierarchy and a professional atmosphere, perfect for projects that value understated refinement and a sleek, contemporary feel across various digital and print applications.

Best used for

  • Modern corporate branding and websites
  • Luxury product design and marketing
  • Urban-themed photography portfolios
  • High-end tech applications and UI/UX
  • Architectural firms and interior design studios
  • Editorial content with a sophisticated tone

Suggested color roles

primary

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

secondary

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

accent

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

background

Choose #36454F for a deep, immersive background, or #9DA4AA for lighter, spacious sections.

text

For dark backgrounds, use #9DA4AA or #828A91 for excellent readability. On light backgrounds like #9DA4AA, #36454F is ideal for all text.

Accessibility notes

  • Ensure #9DA4AA text on #36454F background meets WCAG contrast standards for body text.
  • Avoid using #6A737C text on #828A91 backgrounds for small text, as contrast may be insufficient.
  • Use #4F5B66 for headings and important information on #9DA4AA backgrounds for strong readability.
  • Test interactive elements with #828A91 against adjacent darker tones to ensure sufficient visual distinction.

Recommended combinations

Smoldering Contrast

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

#36454F · #9DA4AA · #4F5B66

Urban Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking urban textures.

#4F5B66 · #6A737C · #828A91

Sleek Interface

Use #36454F for strong visual elements on a #9DA4AA canvas, with #6A737C for delicate details or lines.

#9DA4AA · #36454F · #6A737C

CSS variables

:root {
  --charcoal-smolder-1: #36454F;
  --charcoal-smolder-2: #4F5B66;
  --charcoal-smolder-3: #6A737C;
  --charcoal-smolder-4: #828A91;
  --charcoal-smolder-5: #9DA4AA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-smolder": {
        1: "#36454F",
        2: "#4F5B66",
        3: "#6A737C",
        4: "#828A91",
        5: "#9DA4AA",
      }
    }
  }
}

Related searches

charcoal grey sophisticatedminimalist urban palettesmoky neutral color schememodern dark grey brandingsubtle elegant UI colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#4F5B66
·
Color 3#6A737C
·
Color 4#828A91
·
Color 5#9DA4AA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
2.8:1Fail
3.9:1AA18
2
1.4:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
2.1:1Fail
1.4:1Fail
1.4:1Fail
1.9:1Fail
4
2.8:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
3.9:1AA18
2.8:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Charcoal Smolder

View all neutral
Architectural Concrete Edge
Bare Concrete Stillness
City Loft Grey
Cloudy Cobblestone Lane
Concrete Bloom Resilient
Concrete Garden Grey