Back to palettes

Palette

Charcoal Ember Haze

The smoldering aftermath of a fire, with glowing embers fading into dark, cold charcoal.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#333333#4A4A4A#1A1A1A#FF4500#222222

Palette guide

How to use Charcoal Ember Haze

Overview

The Charcoal Ember Haze palette masterfully captures the essence of a smoldering fire, blending deep charcoals with a striking, vibrant ember accent. It features a robust foundation of dark greys like #1A1A1A, #222222, #333333, and #4A4A4A, providing a rich, moody backdrop. The standout #FF4500 (OrangeRed) injects a powerful burst of warmth, reminiscent of glowing embers. This palette is exceptionally dynamic, offering designers and developers a dramatic contrast between cool, deep neutrals and intense, fiery energy. It's ideal for projects that aim to evoke power, passion, or a sense of intriguing mystery with a bold focal point.

Best used for

  • Gaming interfaces and branding
  • Action-oriented website designs
  • Event promotions (music festivals, concerts)
  • Automotive or industrial product showcases
  • Dark-themed applications requiring a vibrant accent
  • Halloween or dramatic seasonal designs

Suggested color roles

primary

Utilize #1A1A1A as the dominant background or base color, establishing a profound, dark atmosphere.

secondary

Employ #333333 for content panels, secondary navigation, or subtle visual separation.

accent

Leverage #FF4500 extensively for calls-to-action, critical alerts, interactive states, or key branding elements to draw immediate attention.

background

Primarily use #1A1A1A or #222222 for dark, immersive backgrounds. #4A4A4A can be used for secondary background layers.

text

For readability on dark backgrounds, use a near-white text color. For headings or bold statements on lighter darks like #4A4A4A, #1A1A1A works well. #FF4500 can be used for highlighted text.

Accessibility notes

  • Ensure #FF4500 text on #1A1A1A or #222222 backgrounds meets WCAG contrast standards, especially for smaller font sizes.
  • Avoid using #4A4A4A text on #333333 backgrounds without checking contrast, as they are very similar in luminosity.
  • Always test #FF4500 against all charcoal shades for sufficient contrast, particularly for critical interactive elements.
  • Consider using a brighter white for body text on the darkest charcoals to guarantee readability for all users.

Recommended combinations

Ember Glow

Striking combination for hero sections: deep background, vibrant accent for CTAs, and a softer charcoal for supporting text.

#1A1A1A · #FF4500 · #333333

Subtle Smoke

Creates layered depth in UI components or illustrations without relying on the accent color.

#222222 · #4A4A4A · #333333

Alert & Action

Use #FF4500 for urgent notifications or primary buttons against a dark background, with #4A4A4A for surrounding detail.

#FF4500 · #1A1A1A · #4A4A4A

CSS variables

:root {
  --charcoal-ember-haze-1: #333333;
  --charcoal-ember-haze-2: #4A4A4A;
  --charcoal-ember-haze-3: #1A1A1A;
  --charcoal-ember-haze-4: #FF4500;
  --charcoal-ember-haze-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-ember-haze": {
        1: "#333333",
        2: "#4A4A4A",
        3: "#1A1A1A",
        4: "#FF4500",
        5: "#222222",
      }
    }
  }
}

Related searches

dark charcoal red paletteember glow color schemefiery accent dark colorsgaming UI color palettedramatic black and orange

Palette colors

Hex values

Color 1#333333
·
Color 2#4A4A4A
·
Color 3#1A1A1A
·
Color 4#FF4500
·
Color 5#222222
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.4:1Fail
3.7:1AA18
1.3:1Fail
2
1.4:1Fail
2:1Fail
2.6:1Fail
1.8:1Fail
3
1.4:1Fail
2:1Fail
5.1:1AA
1.1:1Fail
4
3.7:1AA18
2.6:1Fail
5.1:1AA
4.6:1AA
5
1.3:1Fail
1.8:1Fail
1.1:1Fail
4.6:1AA

Similar palettes

More like Charcoal Ember Haze

View all monochrome
Indigo Ocean Depths
Industrial Gear Grind
Ink Wash Shadow
Noir Film Shadows
Obsidian Night Sky
Shadowed Alley Fog