Back to palettes

Palette

Charred Ember Still

Deep, smoldering tones of a dying fire, capturing the quiet afterglow of intense heat.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Charred Ember Still 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 Charred Ember Still.

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

Data visualization

#2B2D2E#4A4E52#6F7275#939699#B8BCBF

Palette guide

How to use Charred Ember Still

Overview

The Charred Ember Still palette captures the quiet afterglow of intense heat, offering deep, smoldering tones of a dying fire. This collection features a dark, mysterious #2B2D2E, complemented by progressively lighter ash greys: #4A4E52, #6F7275, #939699, and the soft #B8BCBF. For designers and developers, this palette provides a sophisticated, muted aesthetic, ideal for projects requiring a sense of calm, introspection, or understated drama. Its subtle transitions allow for clear visual hierarchy and a refined user experience, perfect for branding or interfaces that aim to convey depth, maturity, and quiet strength.

Best used for

  • Meditation or wellness apps and websites
  • Luxury minimalist branding
  • Art and photography portfolios with a subdued mood
  • High-end men's grooming products
  • Conceptual design projects
  • Dark mode UI themes seeking softness

Suggested color roles

primary

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

secondary

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

accent

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

background

Choose #2B2D2E for a deep, atmospheric background, or #B8BCBF for lighter, spacious sections.

text

For dark backgrounds, use #B8BCBF or #939699 for excellent readability. On light backgrounds like #B8BCBF, #2B2D2E is ideal for all text.

Accessibility notes

  • Ensure #B8BCBF text on #2B2D2E background meets WCAG contrast standards for body text.
  • Avoid using #6F7275 text on #939699 backgrounds for small text, as contrast may be insufficient.
  • Use #4A4E52 for headings and important information on #B8BCBF backgrounds for strong readability.
  • Test interactive elements with #939699 against adjacent darker tones to ensure sufficient visual distinction.

Recommended combinations

Ember Glow

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

#2B2D2E · #B8BCBF · #4A4E52

Ash Layers

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

#4A4E52 · #6F7275 · #939699

Quiet Contrast

Use #2B2D2E for strong visual elements on a #B8BCBF canvas, with #6F7275 for delicate details or lines.

#B8BCBF · #2B2D2E · #6F7275

CSS variables

:root {
  --charred-ember-still-1: #2B2D2E;
  --charred-ember-still-2: #4A4E52;
  --charred-ember-still-3: #6F7275;
  --charred-ember-still-4: #939699;
  --charred-ember-still-5: #B8BCBF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charred-ember-still": {
        1: "#2B2D2E",
        2: "#4A4E52",
        3: "#6F7275",
        4: "#939699",
        5: "#B8BCBF",
      }
    }
  }
}

Related searches

charcoal ash grey palettesmoldering dark colorsminimalist dark grey schemesubdued neutral UIcalm sophisticated palette

Palette colors

Hex values

Color 1#2B2D2E
·
Color 2#4A4E52
·
Color 3#6F7275
·
Color 4#939699
·
Color 5#B8BCBF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
4.7:1AA
7.2:1AAA
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
4.4:1AA18
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
2.5:1Fail
4
4.7:1AA
2.8:1Fail
1.6:1Fail
1.6:1Fail
5
7.2:1AAA
4.4:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Charred Ember Still

View all dark