Back to palettes

Palette

Volcanic Ash Bloom

A somber elegance, drawing inspiration from volcanic landscapes and the subtle life that emerges.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5A5A5A#778899#DCDCDC#FFEBCD

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette offers a somber elegance, drawing inspiration from volcanic landscapes and the subtle life that emerges. It features the deep Charcoal Grey (#36454F) as a grounding force, complemented by the balanced Dim Gray (#5A5A5A) and the cool Light Slate Gray (#778899). A bright touch of Gainsboro (#DCDCDC) provides crisp contrast, while the soft, warm Blanched Almond (#FFEBCD) introduces a gentle, organic highlight. This versatile palette is ideal for designers and developers seeking a robust yet refined aesthetic that evokes natural resilience and understated sophistication, perfect for industrial or subtly earthy designs.

Best used for

  • Industrial design interfaces
  • Sustainable product branding
  • Minimalist web design
  • Architectural visualization
  • Editorial layouts with natural themes
  • Eco-conscious fashion or lifestyle brands

Suggested color roles

primary

Establishes a deep, stable foundation, perfect for backgrounds, headers, or robust structural elements with #36454F (Charcoal Grey).

secondary

A versatile mid-tone, suitable for main content blocks, cards, or secondary navigation using #5A5A5A (Dim Gray).

accent

Introduces a soft, warm, organic highlight, ideal for subtle calls-to-action, delicate icons, or textural elements with #FFEBCD (Blanched Almond).

background

Creates a sophisticated, dark canvas that allows lighter grays and the warm beige accent to emerge, typically #36454F (Charcoal Grey).

text

For primary text on dark backgrounds, use #DCDCDC (Gainsboro); #778899 (Light Slate Gray) can be used for secondary text on lighter grays.

Accessibility notes

  • Ensure strong contrast between text and background, especially for #DCDCDC (Gainsboro) on #36454F (Charcoal Grey).
  • #FFEBCD (Blanched Almond) may have insufficient contrast for small text on #DCDCDC (Gainsboro) or #778899 (Light Slate Gray).
  • Always check WCAG guidelines for all text-background pairings, adjusting for font size and weight.
  • Use a pure black or very dark grey for text on #FFEBCD (Blanched Almond) if it's used as a background.

Recommended combinations

Earthy Grey

Combines deep grey with a warm beige and bright grey for a natural, sophisticated contrast.

#36454F · #FFEBCD · #DCDCDC

Ash Layers

Creates subtle depth and hierarchy, ideal for card designs or progressive disclosure.

#5A5A5A · #778899 · #DCDCDC

Industrial Bloom

A robust base with a cool mid-tone and a soft, warm highlight, perfect for branding.

#36454F · #778899 · #FFEBCD

CSS variables

:root {
  --volcanic-ash-bloom-1: #36454F;
  --volcanic-ash-bloom-2: #5A5A5A;
  --volcanic-ash-bloom-3: #778899;
  --volcanic-ash-bloom-4: #DCDCDC;
  --volcanic-ash-bloom-5: #FFEBCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom": {
        1: "#36454F",
        2: "#5A5A5A",
        3: "#778899",
        4: "#DCDCDC",
        5: "#FFEBCD",
      }
    }
  }
}

Related searches

dark grey beige paletteindustrial ash colorssubtle earth tone schememinimalist grey with warm accentnatural dark grey UI

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A5A5A
·
Color 3#778899
·
Color 4#DCDCDC
·
Color 5#FFEBCD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.7:1Fail
7.2:1AAA
8.5:1AAA
2
1.4:1Fail
1.9:1Fail
5:1AA
5.9:1AA
3
2.7:1Fail
1.9:1Fail
2.7:1Fail
3.1:1AA18
4
7.2:1AAA
5:1AA
2.7:1Fail
1.2:1Fail
5
8.5:1AAA
5.9:1AA
3.1:1AA18
1.2:1Fail

Similar palettes

More like Volcanic Ash Bloom

View all neutral
Moonlit Canyon Path
Urban Alley Grit
Urban Grime Blues
Gargoyle Grey
Haunted Library Pages
Mossy Stone Relic