Palette

Volcanic Ash Bloom

Muted greys of volcanic ash, accented by a deep, smoldering red that suggests latent power and new life.

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

#3A3E3F#6D7273#A7ACAD#DFE0E1#8C0000

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette features muted greys of volcanic ash, accented by a deep, smoldering red that suggests latent power and new life. Ranging from the profound #3A3E3F to the crisp #DFE0E1, with balanced mid-tones like #6D7273 and #A7ACAD, this palette is subtly invigorated by the strong, intense #8C0000. Designers and developers can utilize this scheme to convey resilience, understated strength, and a touch of dramatic elegance. It's particularly effective for projects that require a sophisticated, minimal aesthetic with a powerful, yet controlled, focal point, evoking both stability and potential.

Best used for

High-end minimalist branding
Professional corporate websites
Editorial design with a strong visual accent
Luxury product packaging
UI for sophisticated analytics dashboards
Art gallery or museum digital presence

Suggested color roles

primary

Provides a solid, grounding foundation, excellent for backgrounds, headers, or structural elements with #3A3E3F (Dark Grey).

secondary

A versatile mid-tone, suitable for main content blocks, cards, or secondary navigation using #6D7273 (Medium Grey).

accent

A powerful, smoldering highlight, ideal for calls-to-action, warnings, or critical data points with #8C0000 (Deep Red).

background

Creates a sophisticated, neutral backdrop that allows lighter grays and the deep red accent to command attention, typically #3A3E3F (Dark Grey).

text

For primary text on dark backgrounds, use #DFE0E1 (Near White); #A7ACAD (Light Grey) can be used for secondary text or subtle details on darker grays.

Accessibility notes

Ensure high contrast for text; #DFE0E1 (Near White) on #3A3E3F (Dark Grey) or #8C0000 (Deep Red) is excellent.
#A7ACAD (Light Grey) should be checked for sufficient contrast when used on #6D7273 (Medium Grey).
Avoid placing #8C0000 (Deep Red) on #3A3E3F (Dark Grey) for small text without checking WCAG compliance.
Always test all text-background pairings for readability, especially with the strong accent color.

Recommended combinations

Smoldering Core

Creates a dramatic focal point with a strong, deep red against a dark base and bright highlights.

#3A3E3F · #8C0000 · #DFE0E1

Ash Layers

Subtle tonal shifts for depth and hierarchy, suitable for background patterns or card designs.

#6D7273 · #A7ACAD · #DFE0E1

Resilient Bloom

A strong base with bright contrast and a powerful accent, ideal for key messages or branding.

#3A3E3F · #DFE0E1 · #8C0000

CSS variables

:root {
  --volcanic-ash-bloom-6-1: #3A3E3F;
  --volcanic-ash-bloom-6-2: #6D7273;
  --volcanic-ash-bloom-6-3: #A7ACAD;
  --volcanic-ash-bloom-6-4: #DFE0E1;
  --volcanic-ash-bloom-6-5: #8C0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom-6": {
        1: "#3A3E3F",
        2: "#6D7273",
        3: "#A7ACAD",
        4: "#DFE0E1",
        5: "#8C0000",
      }
    }
  }
}

Hex values

Color 1#3A3E3F

Color 2#6D7273

Color 3#A7ACAD

Color 4#DFE0E1

Color 5#8C0000

Accessibility

Contrast checker

2.2:1Fail

4.7:1AA

8.2:1AAA

1.1:1Fail

2.2:1Fail

2.1:1Fail

3.7:1AA18

2:1Fail

4.7:1AA

2.1:1Fail

1.7:1Fail

4.3:1AA18

8.2:1AAA

3.7:1AA18

1.7:1Fail

7.5:1AAA

1.1:1Fail

2:1Fail

4.3:1AA18

7.5:1AAA

Similar palettes

More like Volcanic Ash Bloom