Palette

Volcanic Ash Bloom

Somber greys contrasted with the deep, smoldering oranges of an erupting volcano's fiery core.

darkdark5 colors

More dark 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#54626F#788795#A52A2A#D2691E

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette is a dramatic and powerful collection, contrasting somber greys with the deep, smoldering oranges and reds of an erupting volcano's fiery core. From the deep Charcoal Grey (#36454F) and sophisticated Grey-Blue (#54626F) to the lighter #788795, this palette is punctuated by the intense Brownish-Red (#A52A2A) and vibrant Burnt Orange (#D2691E). Designers and developers can leverage this scheme to evoke raw power, natural drama, and dynamic energy. It's exceptionally useful for projects demanding a strong visual impact with a touch of organic warmth and intensity.

Best used for

Action-oriented gaming interfaces
Dramatic movie posters or trailers
High-impact event branding
Warning systems or alerts UI
Adventure sports marketing
Brand identities for robust, energetic products

Suggested color roles

primary

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

secondary

A versatile mid-tone, suitable for main content blocks or secondary navigation, adding depth with #54626F (Dark Grey-Blue).

accent

A strong, intense highlight, ideal for calls-to-action, warnings, or dramatic visual cues with #A52A2A (Brownish-Red).

background

Creates a powerful, dark backdrop that makes the fiery accents truly stand out, typically #36454F (Charcoal Grey).

text

For secondary text on darker backgrounds, use #788795 (Grey-Blue); a very light grey or off-white is recommended for primary text on #36454F or #A52A2A.

Accessibility notes

Ensure #A52A2A (Brownish-Red) and #D2691E (Burnt Orange) have sufficient contrast when used for text against other palette colors.
#788795 (Grey-Blue) provides good contrast for text on #36454F (Charcoal Grey).
Avoid placing #A52A2A (Brownish-Red) on #D2691E (Burnt Orange) for text due to insufficient contrast.
Always check WCAG guidelines for all text-background pairings, especially with the vibrant accents.

Recommended combinations

Fiery Core

Creates high drama and impact, ideal for hero sections or urgent alerts.

#36454F · #A52A2A · #D2691E

Smoldering Ash

Subtle ash tones with a hint of underlying warmth, good for secondary content or data visualization.

#54626F · #788795 · #A52A2A

Volcanic Edge

A strong base with a vibrant, energetic accent, perfect for calls-to-action or key features.

#36454F · #D2691E · #788795

CSS variables

:root {
  --volcanic-ash-bloom-5-1: #36454F;
  --volcanic-ash-bloom-5-2: #54626F;
  --volcanic-ash-bloom-5-3: #788795;
  --volcanic-ash-bloom-5-4: #A52A2A;
  --volcanic-ash-bloom-5-5: #D2691E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom-5": {
        1: "#36454F",
        2: "#54626F",
        3: "#788795",
        4: "#A52A2A",
        5: "#D2691E",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#54626F

Color 3#788795

Color 4#A52A2A

Color 5#D2691E

Accessibility

Contrast checker

1.6:1Fail

2.7:1Fail

1.4:1Fail

2.7:1Fail

1.6:1Fail

1.7:1Fail

1.1:1Fail

1.7:1Fail

2.7:1Fail

1.7:1Fail

1.9:1Fail

1:1Fail

1.4:1Fail

1.1:1Fail

1.9:1Fail

2.7:1Fail

1.7:1Fail

1:1Fail

1.9:1Fail

Similar palettes

More like Volcanic Ash Bloom

Volcanic Ash Bloom

See it in context.

Ready when you are.

Built with Volcanic Ash Bloom.

How to use Volcanic Ash Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fiery Core

Smoldering Ash

Volcanic Edge

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Ash Bloom