Palette

Midnight Ember Smoke

Delves into the enigmatic realm of deep grays and subtle charcoal, like a mysterious smoky haze.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Ember 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 Midnight Ember Smoke.

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

Data visualization

#1F1F1F#3C3C3C#6A6A6A#9B9B9B#D0D0D0

Palette guide

How to use Midnight Ember Smoke

Overview

The Midnight Ember Smoke palette masterfully explores the enigmatic realm of deep greys and subtle charcoal, evoking the mystery of a smoky haze. Starting with the profound #1F1F1F, it transitions through the solid #3C3C3C and the versatile #6A6A6A. The palette then brightens to the sophisticated #9B9B9B, culminating in the soft, almost luminous #D0D0D0. This collection is ideal for designers and developers aiming for a minimalist, sophisticated, and moody aesthetic. It provides a timeless foundation for dark mode interfaces, elegant branding, or any project requiring a sleek, modern, and understated visual identity. These shades offer incredible versatility for creating depth and visual hierarchy.

Best used for

Minimalist website designs
Sleek dark mode UI/UX
High-end tech product branding
Photography portfolios or art galleries
Professional corporate dashboards
Automotive or luxury goods marketing

Suggested color roles

primary

Utilize #1F1F1F as the foundational background, establishing a deep, uniform charcoal base for a sophisticated look.

secondary

Apply #3C3C3C for secondary panels, cards, or borders, providing a subtle visual break from the primary background.

accent

Reserve #D0D0D0 for key interactive elements, calls-to-action, or important text to provide a clear, soft highlight.

background

The deep #1F1F1F serves as an excellent primary background, offering a sleek, modern canvas for content.

text

For optimal readability, use #D0D0D0 or #9B9B9B for primary text on darker backgrounds, ensuring clear contrast.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter greys like #D0D0D0 on #1F1F1F or #3C3C3C, to meet WCAG AA standards.
Avoid pairing #6A6A6A with #3C3C3C for small text; opt for a lighter grey for better legibility.
Interactive elements should clearly stand out using #D0D0D0 against darker backgrounds to aid users with visual impairments.
For users requiring enhanced readability, consider a pure white text option against the darkest background.

Recommended combinations

Smoky Base

Excellent for core UI structures, using the darkest shades for depth and #D0D0D0 for prominent text or interactive elements.

#1F1F1F · #3C3C3C · #D0D0D0

Ash Gradient

Ideal for subtle background gradients or progress bars, creating a smooth, understated visual flow.

#3C3C3C · #6A6A6A · #9B9B9B

Highlight Contrast

Perfect for UI components: #1F1F1F as a container, #6A6A6A for subheadings, and #D0D0D0 for active states or icons.

#1F1F1F · #6A6A6A · #D0D0D0

CSS variables

:root {
  --midnight-ember-smoke-1: #1F1F1F;
  --midnight-ember-smoke-2: #3C3C3C;
  --midnight-ember-smoke-3: #6A6A6A;
  --midnight-ember-smoke-4: #9B9B9B;
  --midnight-ember-smoke-5: #D0D0D0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-ember-smoke": {
        1: "#1F1F1F",
        2: "#3C3C3C",
        3: "#6A6A6A",
        4: "#9B9B9B",
        5: "#D0D0D0",
      }
    }
  }
}

Hex values

Color 1#1F1F1F

Color 2#3C3C3C

Color 3#6A6A6A

Color 4#9B9B9B

Color 5#D0D0D0

Accessibility

Contrast checker

1.5:1Fail

3:1AA18

5.9:1AA

10.7:1AAA

1.5:1Fail

2:1Fail

4:1AA18

7.2:1AAA

3:1AA18

2:1Fail

1.9:1Fail

3.5:1AA18

5.9:1AA

4:1AA18

1.9:1Fail

1.8:1Fail

10.7:1AAA

7.2:1AAA

3.5:1AA18

1.8:1Fail

Similar palettes

More like Midnight Ember Smoke

View all Dark

Abyssal Bioluminescence

Haunted Hallway Gloom

Midnight Velvet Gloom

Shadowed Woods Deep

Abyssal Seaweed Garden

Deep Forest Murmur