Back to palettes

Palette

Smoldering Ash Plume

A powerful monochrome range inspired by the raw, smoldering tones of volcanic ash plumes.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoldering Ash Plume 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 Smoldering Ash Plume.

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

Data visualization

#E8E8E8#BDBDBD#8F8F8F#5C5C5C#2D2D2D

Palette guide

How to use Smoldering Ash Plume

Overview

The Smoldering Ash Plume palette captures the raw, powerful essence of volcanic ash with a robust range of greys. From the stark lightness of #E8E8E8 to the deep, grounding #2D2D2D, this monochrome scheme offers dramatic contrast and minimalist sophistication. Mid-tones like #BDBDBD, #8F8F8F, and #5C5C5C provide excellent versatility for layering, shadows, and subtle textural effects. Ideal for designers and developers aiming for a strong, contemporary aesthetic, it creates a sense of depth and gravitas, perfect for impactful digital and physical designs.

Best used for

  • Industrial or brutalist design aesthetics
  • High-tech brand identity and websites
  • Photography and art exhibition themes
  • Dark mode applications and dashboards
  • Modern architectural presentations
  • Apparel or product design with a minimalist edge

Suggested color roles

primary

Use #2D2D2D as a powerful base for backgrounds or primary structural elements, embodying strength and depth.

secondary

Apply #5C5C5C for main content panels, navigation, or strong typography, providing excellent contrast against lighter shades.

accent

Incorporate #8F8F8F for subtle highlights, interactive states, or dividing lines, offering a balanced visual break.

background

Utilize #E8E8E8 for clean, expansive backgrounds or card surfaces, ensuring maximum readability for dark text.

text

For dark backgrounds, use #E8E8E8 or white. For light backgrounds, #2D2D2D provides crisp, clear readability.

Accessibility notes

  • Ensure #2D2D2D text on #E8E8E8 background achieves WCAG AAA contrast for maximum readability.
  • Check contrast ratios carefully when using mid-greys like #8F8F8F on #BDBDBD backgrounds.
  • For text on #5C5C5C, prefer #E8E8E8 or white for good contrast.
  • Avoid using #BDBDBD or #8F8F8F for small body text on any background other than #2D2D2D or white.

Recommended combinations

High Impact

Create bold, high-contrast layouts. #2D2D2D for backgrounds, #E8E8E8 for text, and #5C5C5C for call-to-action elements.

#2D2D2D · #E8E8E8 · #5C5C5C

Layered Depth

Ideal for UI elements with subtle depth, like layered cards or panels, using a gradient of these mid-tones.

#BDBDBD · #8F8F8F · #5C5C5C

Clean Minimal

Perfect for clean, minimalist designs. #E8E8E8 as background, #2D2D2D for text, and #BDBDBD for secondary details.

#E8E8E8 · #2D2D2D · #BDBDBD

CSS variables

:root {
  --smoldering-ash-plume-1: #E8E8E8;
  --smoldering-ash-plume-2: #BDBDBD;
  --smoldering-ash-plume-3: #8F8F8F;
  --smoldering-ash-plume-4: #5C5C5C;
  --smoldering-ash-plume-5: #2D2D2D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoldering-ash-plume": {
        1: "#E8E8E8",
        2: "#BDBDBD",
        3: "#8F8F8F",
        4: "#5C5C5C",
        5: "#2D2D2D",
      }
    }
  }
}

Related searches

volcanic ash palettedark grey monochromeindustrial color schememinimalist grey colorsstrong neutral palette

Palette colors

Hex values

Color 1#E8E8E8
·
Color 2#BDBDBD
·
Color 3#8F8F8F
·
Color 4#5C5C5C
·
Color 5#2D2D2D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
5.5:1AA
11.2:1AAA
2
1.5:1Fail
1.7:1Fail
3.6:1AA18
7.3:1AAA
3
2.6:1Fail
1.7:1Fail
2.1:1Fail
4.3:1AA18
4
5.5:1AA
3.6:1AA18
2.1:1Fail
2.1:1Fail
5
11.2:1AAA
7.3:1AAA
4.3:1AA18
2.1:1Fail

Similar palettes

More like Smoldering Ash Plume

View all monochrome