Palette

Volcanic Ash Bloom

Shades of ash and stone, representing new growth emerging from the cool, resilient remnants of volcanic activity.

monochromeminimal5 colors

More monochrome 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

#303030#5C5C5C#8F8F8F#BCBCBC#E0E0E0

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette is a refined monochrome collection, featuring shades of ash and stone that represent new growth emerging from resilient volcanic remnants. Ranging from the deep #303030 to the luminous #E0E0E0, with balanced mid-tones like #5C5C5C and #8F8F8F, this palette offers exceptional versatility for designers and developers. It's ideal for creating minimalist, sophisticated, and modern aesthetics where subtle variations in tone convey depth and elegance. This scheme is perfect for conveying professionalism, understated luxury, and a strong, clean brand identity across various digital and print applications.

Best used for

High-end minimalist websites
Corporate branding and stationery
Photography and art gallery interfaces
Modern architecture portfolios
Tech product UI/UX designs
Elegant editorial layouts

Suggested color roles

primary

Provides a strong, foundational anchor, excellent for backgrounds, headers, or structural elements with #303030 (Deep Charcoal).

secondary

A versatile mid-tone, suitable for main content blocks, cards, or secondary navigation using #5C5C5C (Dark Grey).

accent

Offers bright, clean highlights, perfect for interactive elements, delicate text, or subtle dividers with #E0E0E0 (Very Light Grey).

background

Creates a sophisticated, dark canvas that allows lighter elements to pop with clarity, typically #303030 (Deep Charcoal).

text

For primary text on dark backgrounds, use #E0E0E0 (Very Light Grey); #BCBCBC (Light Grey) can be used for secondary text on slightly darker grays.

Accessibility notes

Ensure high contrast for text; #E0E0E0 (Very Light Grey) on #303030 (Deep Charcoal) is excellent.
Be cautious with combinations like #8F8F8F on #5C5C5C for small text, as contrast might be insufficient.
Always check WCAG guidelines for text readability, especially for smaller font sizes.
Use the darkest shades for backgrounds and the lightest for text for optimal accessibility.

Recommended combinations

Modern Ash

Creates a sharp, clean contrast for bold headings and minimalist layouts.

#303030 · #E0E0E0 · #8F8F8F

Layered Stone

Subtle tonal shifts for background textures, card borders, or progressive disclosure.

#5C5C5C · #8F8F8F · #BCBCBC

Sleek Depth

A strong base with light accents, ideal for professional interfaces and branding.

#303030 · #BCBCBC · #5C5C5C

CSS variables

:root {
  --volcanic-ash-bloom-4-1: #303030;
  --volcanic-ash-bloom-4-2: #5C5C5C;
  --volcanic-ash-bloom-4-3: #8F8F8F;
  --volcanic-ash-bloom-4-4: #BCBCBC;
  --volcanic-ash-bloom-4-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom-4": {
        1: "#303030",
        2: "#5C5C5C",
        3: "#8F8F8F",
        4: "#BCBCBC",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#303030

Color 2#5C5C5C

Color 3#8F8F8F

Color 4#BCBCBC

Color 5#E0E0E0

Accessibility

Contrast checker

2:1Fail

4.1:1AA18

6.9:1AA

10:1AAA

2:1Fail

2.1:1Fail

3.5:1AA18

5.1:1AA