Back to palettes

Palette

Volcanic Ash Bloom

Subdued grays and blues, reflecting the stark beauty of volcanic landscapes.

neutralminimal5 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

#696969#778899#B0C4DE#A9A9A9#36454F

Palette guide

How to use Volcanic Ash Bloom

Overview

The "Volcanic Ash Bloom" palette presents a serene blend of subdued grays and cool blues, capturing the stark beauty of volcanic landscapes where new life begins to emerge. Anchored by the deep charcoal of #36454F, it transitions through elegant grays like #696969 and #A9A9A9, culminating in the soft, ethereal #B0C4DE. This palette is incredibly versatile for designers and developers aiming for a minimalist yet sophisticated aesthetic. It evokes feelings of calm, resilience, and natural elegance, making it suitable for projects that require a grounded, thoughtful, and contemporary feel.

Best used for

  • Eco-friendly brand identities
  • Wellness and mindfulness apps
  • Modern architectural renderings
  • Content-heavy blogs or publishing platforms
  • Sustainable fashion branding
  • UI designs for smart home devices

Suggested color roles

primary

Provides a strong, anchoring base, ideal for backgrounds, headers, or foundational elements with #36454F (Charcoal Grey).

secondary

A versatile mid-tone, excellent for main content areas, cards, or secondary navigation using #778899 (Light Slate Gray).

accent

Introduces a gentle, cool highlight, perfect for interactive elements, subtle icons, or progress indicators with #B0C4DE (Light Steel Blue).

background

Establishes a sophisticated and calming backdrop that allows lighter elements to stand out, typically #36454F (Charcoal Grey).

text

For body text on lighter backgrounds, use #A9A9A9 (Dark Gray); #B0C4DE (Light Steel Blue) can be used for headings or highlights on darker surfaces. A near-white for optimal readability on #36454F.

Accessibility notes

  • Ensure sufficient contrast when using #A9A9A9 (Dark Gray) for text on #778899 (Light Slate Gray) or #696969 (Dim Gray).
  • #B0C4DE (Light Steel Blue) provides good contrast against #36454F (Charcoal Grey) for text.
  • Avoid low contrast combinations; always test text accessibility, especially for smaller fonts.
  • Consider a pure white or very light grey for body text on the darkest backgrounds for WCAG compliance.

Recommended combinations

Serene Horizon

Creates a calming, modern look, ideal for clean interfaces with prominent text.

#36454F · #B0C4DE · #A9A9A9

Ash Layers

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

#696969 · #778899 · #A9A9A9

Cool Bloom

A balanced blend of deep and light, perfect for hero sections or brand headers.

#36454F · #778899 · #B0C4DE

CSS variables

:root {
  --volcanic-ash-bloom-2-1: #696969;
  --volcanic-ash-bloom-2-2: #778899;
  --volcanic-ash-bloom-2-3: #B0C4DE;
  --volcanic-ash-bloom-2-4: #A9A9A9;
  --volcanic-ash-bloom-2-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-bloom-2": {
        1: "#696969",
        2: "#778899",
        3: "#B0C4DE",
        4: "#A9A9A9",
        5: "#36454F",
      }
    }
  }
}

Related searches

cool grey blue paletteminimalist ash colorsserene neutral designvolcanic inspired palettemuted blue grey scheme

Palette colors

Hex values

Color 1#696969
·
Color 2#778899
·
Color 3#B0C4DE
·
Color 4#A9A9A9
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.1:1AA18
2.3:1Fail
1.8:1Fail
2
1.5:1Fail
2:1Fail
1.5:1Fail
2.7:1Fail
3
3.1:1AA18
2:1Fail
1.3:1Fail
5.6:1AA
4
2.3:1Fail
1.5:1Fail
1.3:1Fail
4.2:1AA18
5
1.8:1Fail
2.7:1Fail
5.6:1AA
4.2:1AA18

Similar palettes

More like Volcanic Ash Bloom

View all neutral
Ancient City Ruins
Ancient Rune Stone
Calm Interior Lines
Cloudy Cobblestone Lane
Concrete Canyon Dusk
Concrete Urbanity Calm