Palette

Volcanic Ash Ember

Deep greys of cooling ash contrasted with the smoldering glow of volcanic embers and molten rock.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Ash Ember 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 Volcanic Ash Ember.

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

Data visualization

#2B2D2E#5C5E5F#8F6B6B#CD8C68#E2C0A5

Palette guide

How to use Volcanic Ash Ember

Overview

The "Volcanic Ash Ember" palette masterfully contrasts deep greys of cooling ash with the smoldering glow of volcanic embers. This dramatic collection features profound charcoal #2B2D2E and a mid-grey #5C5E5F, setting a stark stage for the warm, earthy tones. The rich, muted red #8F6B6B transitions into the vibrant, yet grounded #CD8C68, and culminates in the soft, glowing #E2C0A5. Ideal for projects needing intensity balanced with warmth, this palette excels in creating a sophisticated, powerful, and memorable visual experience, perfect for conveying raw energy or a sense of enduring strength.

Best used for

Gaming or fantasy-themed interfaces
Dramatic branding for artisanal products
High-end photography and cinema websites
Automotive or industrial design showcases
Interior design with rustic-modern aesthetics
Event promotions with an energetic feel

Suggested color roles

primary

#2B2D2E - A deep, almost black charcoal, providing a strong, immersive foundation for backgrounds, headers, or robust structural elements.

secondary

#5C5E5F - A versatile dark grey, excellent for secondary content panels, card backgrounds, or subtle UI elements, offering depth.

accent

#CD8C68 - A vibrant, warm ember orange, perfect for calls-to-action, important notifications, or graphic elements that demand immediate attention.

background

#E2C0A5 - A soft, glowing, light beige, offering a warm, inviting canvas. Ideal for main page backgrounds where dark text will stand out effectively.

text

#2B2D2E or charcoal on lighter backgrounds like #E2C0A5. For dark backgrounds, #E2C0A5 provides excellent readability, while #CD8C68 can be used for highlights.

Accessibility notes

Ensure sufficient contrast when using #5C5E5F for text on backgrounds like #2B2D2E.
The vibrant #CD8C68 accent color needs careful contrast checking, especially when used for text on #E2C0A5 or #5C5E5F.
Dark text like #2B2D2E on #E2C0A5 provides excellent readability.
Avoid placing #8F6B6B text directly on #5C5E5F as contrast might be insufficient.

Recommended combinations

Ember Glow

A high-contrast, dramatic combination ideal for hero sections, strong calls-to-action, or branding elements that need to pop.

#2B2D2E · #CD8C68 · #E2C0A5

Muted Warmth

Excellent for content blocks where a softer, earthy feel is desired, blending warm greys with a subtle red for depth.

#5C5E5F · #8F6B6B · #E2C0A5

Ash & Fire

Creates a powerful dark theme with a vibrant accent, perfect for UI elements that require both sophistication and an energetic focal point.

#2B2D2E · #5C5E5F · #CD8C68

CSS variables

:root {
  --volcanic-ash-ember-1: #2B2D2E;
  --volcanic-ash-ember-2: #5C5E5F;
  --volcanic-ash-ember-3: #8F6B6B;
  --volcanic-ash-ember-4: #CD8C68;
  --volcanic-ash-ember-5: #E2C0A5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-ember": {
        1: "#2B2D2E",
        2: "#5C5E5F",
        3: "#8F6B6B",
        4: "#CD8C68",
        5: "#E2C0A5",
      }
    }
  }
}

Hex values

Color 1#2B2D2E

Color 2#5C5E5F

Color 3#8F6B6B

Color 4#CD8C68

Color 5#E2C0A5

Accessibility

Contrast checker

2.1:1Fail

3:1Fail

5:1AA

8.1:1AAA

2.1:1Fail

1.4:1Fail

2.3:1Fail

3.8:1AA18

3:1Fail

1.4:1Fail

1.7:1Fail

2.7:1Fail

5:1AA

2.3:1Fail

1.7:1Fail

1.6:1Fail

8.1:1AAA

3.8:1AA18

2.7:1Fail

1.6:1Fail

Similar palettes

More like Volcanic Ash Ember