Back to palettes

Palette

Volcanic Ash Drift

A somber, deep grey gradient, representing the fine, drifting ash after a volcanic eruption.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Ash Drift 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 Drift.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2D2D2D#404040#555555#6B6B6B#808080

Palette guide

How to use Volcanic Ash Drift

Overview

The "Volcanic Ash Drift" palette offers a deeply somber and refined monochrome grey gradient, perfectly capturing the essence of fine ash settling. This collection ranges from the profound #2D2D2D to the softer #808080, providing a versatile foundation for designs that require sophistication and a minimalist touch. The intermediate tones, #404040, #555555, and #6B6B6B, allow for nuanced layering and the creation of clear visual hierarchies within a cohesive dark aesthetic. This palette is especially suited for projects demanding a serious, elegant, and modern feel, ensuring a strong impact with its understated power.

Best used for

  • Luxury brand websites and marketing
  • Dark-themed application interfaces
  • Exhibition and museum digital displays
  • Photography portfolios with dramatic imagery
  • High-end technology product presentations
  • Minimalist editorial layouts

Suggested color roles

primary

#2D2D2D - A rich, deep charcoal, perfect for expansive backgrounds, headers, and foundational UI elements, providing a strong, elegant base.

secondary

#404040 - A versatile dark grey, excellent for secondary content panels, card backgrounds, or subtle divisions, offering depth without harshness.

accent

#808080 - The lightest grey, ideal for subtle highlights, hover states, or fine lines, providing a gentle contrast against the darker tones.

background

#555555 - A balanced mid-grey that can serve as a sophisticated content background, allowing both darker and lighter elements to maintain visibility.

text

#808080 or near-white on darker backgrounds like #2D2D2D or #404040. For lighter backgrounds like #6B6B6B, a dark charcoal like #2D2D2D ensures clarity.

Accessibility notes

  • Ensure sufficient contrast when using #6B6B6B or #808080 for text on mid-range greys like #555555.
  • Dark text, such as #2D2D2D, on the lightest grey #808080 offers good readability for body copy.
  • Avoid low-contrast pairings like #555555 text on a #404040 background for essential information.
  • Always verify WCAG AA contrast standards, particularly for smaller text and interactive components.

Recommended combinations

Deep Monolith

Creates a powerful, dark, and unified interface, excellent for primary content blocks and immersive background experiences.

#2D2D2D · #404040 · #555555

Subtle Transitions

Ideal for secondary content, card designs, or UI elements where a soft, gradual shift in tone is desired for differentiation.

#555555 · #6B6B6B · #808080

Highlighted Content

Uses the lightest grey for prominent text or icons against the darkest background, with a mid-tone for supporting information.

#2D2D2D · #808080 · #404040

CSS variables

:root {
  --volcanic-ash-drift-2-1: #2D2D2D;
  --volcanic-ash-drift-2-2: #404040;
  --volcanic-ash-drift-2-3: #555555;
  --volcanic-ash-drift-2-4: #6B6B6B;
  --volcanic-ash-drift-2-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-drift-2": {
        1: "#2D2D2D",
        2: "#404040",
        3: "#555555",
        4: "#6B6B6B",
        5: "#808080",
      }
    }
  }
}

Related searches

dark grey gradient paletteminimalist charcoal designelegant monochrome UIvolcanic ash color schemedeep grey web design

Palette colors

Hex values

Color 1#2D2D2D
·
Color 2#404040
·
Color 3#555555
·
Color 4#6B6B6B
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.6:1Fail
3.5:1AA18
2
1.3:1Fail
1.4:1Fail
1.9:1Fail
2.6:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
1.9:1Fail
4
2.6:1Fail
1.9:1Fail
1.4:1Fail
1.3:1Fail
5
3.5:1AA18
2.6:1Fail
1.9:1Fail
1.3:1Fail

Similar palettes

More like Volcanic Ash Drift

View all monochrome
Smoldering Ash Plume
Volcanic Ash Fields
Volcanic Cinder Trail
Volcanic Glass Shard
Volcanic Glass Spires
Volcanic Obsidian Flow