Back to palettes

Palette

Volcanic Ash Drift

A brooding palette of deep grays, mirroring the subtle shifts in color found in volcanic ash fields.

neutraldark5 colors
More neutral 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

#1A1A1A#3B3F45#676D73#989EA5#C7CDD2

Palette guide

How to use Volcanic Ash Drift

Overview

The "Volcanic Ash Drift" palette presents a brooding yet sophisticated range of deep grays, perfectly mirroring the subtle shifts found in volcanic ash fields. This collection spans from the intense #1A1A1A to the gentle, cool light grey #C7CDD2, offering a rich spectrum for nuanced design. The intermediate tones like #3B3F45, #676D73, and #989EA5 provide ample opportunities for creating depth and visual hierarchy in a cohesive, muted aesthetic. It's an excellent choice for designers seeking a serious, modern, and earthy feel, providing a strong foundation for both dramatic and understated compositions in digital and print.

Best used for

  • High-end fashion or luxury brand websites
  • Professional corporate branding
  • Dark mode interfaces with a refined touch
  • Architectural photography presentations
  • Editorial layouts for serious topics
  • Modern art gallery digital experiences

Suggested color roles

primary

#1A1A1A - A profound, almost black charcoal, ideal for foundational backgrounds, robust headers, or dramatic full-screen elements, establishing a strong presence.

secondary

#3B3F45 - A deep, cool grey, perfect for secondary panels, card backgrounds, or primary text elements against lighter shades, adding depth.

accent

#C7CDD2 - The lightest, cool grey, excellent for subtle highlights, interactive states, or delicate graphic elements, providing a gentle lift.

background

#676D73 - A balanced, cool mid-grey that serves as an elegant content background, allowing both darker and lighter elements to maintain clarity.

text

#C7CDD2 or near-white on darker backgrounds like #1A1A1A or #3B3F45. For lighter backgrounds like #989EA5, a dark charcoal like #1A1A1A ensures excellent readability.

Accessibility notes

  • Ensure sufficient contrast when using #989EA5 for text on mid-range greys like #676D73.
  • Dark text, such as #1A1A1A, on the light #C7CDD2 background provides optimal readability.
  • Avoid low-contrast combinations like #676D73 text on a #3B3F45 background for critical information.
  • Always verify WCAG AA contrast standards, especially for smaller font sizes and interactive elements.

Recommended combinations

Deep Horizon

Creates a powerful, immersive dark theme, ideal for hero sections, main navigation, or content blocks requiring strong visual weight.

#1A1A1A · #3B3F45 · #676D73

Muted Harmony

Excellent for lighter sections, secondary content, or layered interfaces where a soft, cohesive transition between cool greys is desired.

#676D73 · #989EA5 · #C7CDD2

Stark Readability

Uses the lightest grey for primary text against the darkest background, with a slightly lighter dark grey for supporting elements, ensuring clarity.

#1A1A1A · #C7CDD2 · #3B3F45

CSS variables

:root {
  --volcanic-ash-drift-3-1: #1A1A1A;
  --volcanic-ash-drift-3-2: #3B3F45;
  --volcanic-ash-drift-3-3: #676D73;
  --volcanic-ash-drift-3-4: #989EA5;
  --volcanic-ash-drift-3-5: #C7CDD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-drift-3": {
        1: "#1A1A1A",
        2: "#3B3F45",
        3: "#676D73",
        4: "#989EA5",
        5: "#C7CDD2",
      }
    }
  }
}

Related searches

cool grey dark palettemuted charcoal designprofessional dark UI colorsvolcanic ash inspired themesophisticated grey scale

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#3B3F45
·
Color 3#676D73
·
Color 4#989EA5
·
Color 5#C7CDD2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.3:1AA18
6.4:1AA
10.9:1AAA
2
1.6:1Fail
2:1Fail
3.9:1AA18
6.6:1AA
3
3.3:1AA18
2:1Fail
1.9:1Fail
3.3:1AA18
4
6.4:1AA
3.9:1AA18
1.9:1Fail
1.7:1Fail
5
10.9:1AAA
6.6:1AA
3.3:1AA18
1.7:1Fail

Similar palettes

More like Volcanic Ash Drift

View all neutral
Volcanic Ash
Volcanic Ash Cloud
Volcanic Ash Dawn
Volcanic Ash Haze
Haunted Library Pages
Crumbled Castle Remnants