Palette

Volcanic Ash Bloom

A somber, raw palette inspired by the subtle life emerging from a volcanic ash landscape.

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

#2F4F4F#708090#A9A9A9#D3D3D3#8B4513

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette is a somber yet raw collection inspired by the subtle life emerging from a volcanic ash landscape. It masterfully combines the deep, muted intensity of Dark Slate Gray (#2F4F4F) with the soft sophistication of Light Slate Gray (#708090) and Dark Gray (#A9A9A9). A gentle touch of Light Gray (#D3D3D3) provides necessary contrast, while the rich, earthy Saddle Brown (#8B4513) introduces a grounded, organic warmth. This palette is excellent for designers and developers seeking to evoke resilience, natural beauty, and a sense of quiet power, making it ideal for projects with an organic, rugged, or historical feel.

Best used for

Outdoor adventure brand websites
Historical documentaries or museum exhibits
Rustic interior design concepts
Eco-tourism marketing materials
Packaging for natural or artisanal products
Web designs with a vintage or earthy aesthetic

Suggested color roles

primary

Establishes a deep, stable foundation, perfect for backgrounds or primary structural elements with #2F4F4F (Dark Slate Gray).

secondary

A versatile mid-tone, suitable for main content areas, cards, or supporting navigation using #708090 (Light Slate Gray).

accent

Introduces a warm, earthy highlight, ideal for calls-to-action, important details, or natural textures with #8B4513 (Saddle Brown).

background

Creates a moody, sophisticated backdrop that allows lighter grays and the brown accent to shine, typically #2F4F4F (Dark Slate Gray).

text

For body text against dark backgrounds, use #D3D3D3 (Light Gray); a very light grey or off-white is recommended for optimal readability.

Accessibility notes

Ensure strong contrast between text and background, especially when using #A9A9A9 (Dark Gray) on #708090 (Light Slate Gray).
#D3D3D3 (Light Gray) provides good readability on #2F4F4F (Dark Slate Gray) or #8B4513 (Saddle Brown).
Avoid placing #8B4513 (Saddle Brown) on #2F4F4F (Dark Slate Gray) for small text due to potential low contrast.
Always check WCAG guidelines for all text-background pairings, adjusting for font size and weight.

Recommended combinations

Earthy Resilience

Highlights the natural warmth against a deep, stable base, great for headers or key features.

#2F4F4F · #8B4513 · #D3D3D3

Ash Layers

Creates subtle depth and hierarchy for content blocks or secondary information.

#708090 · #A9A9A9 · #D3D3D3

Grounded Bloom

A robust combination for branding, evoking strength and organic growth.

#2F4F4F · #708090 · #8B4513

CSS variables

:root {
  --volcanic-ash-bloom-3-1: #2F4F4F;
  --volcanic-ash-bloom-3-2: #708090;
  --volcanic-ash-bloom-3-3: #A9A9A9;
  --volcanic-ash-bloom-3-4: #D3D3D3;
  --volcanic-ash-bloom-3-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom-3": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#D3D3D3",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#8B4513

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

6:1AA

1.3:1Fail

2.2:1Fail

1.7:1Fail

2.7:1Fail

1.8:1Fail

3.8:1AA18

1.7:1Fail

1.6:1Fail

3:1AA18