Back to palettes

Palette

Volcanic Ash Fields

Somber, intense grays and blacks inspired by cooled volcanic ash fields.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D3D3D#5A5A5A#808080#A6A6A6#2A2A2A

Palette guide

How to use Volcanic Ash Fields

Overview

The "Volcanic Ash Fields" palette delivers a powerful collection of somber, intense grays and blacks, directly inspired by cooled volcanic ash fields. This monochrome spectrum ranges from the profound #2A2A2A to the lighter #A6A6A6, offering a robust foundation for designs that demand sophistication and a minimalist edge. The intermediate tones, #3D3D3D, #5A5A5A, and #808080, provide ample flexibility for layering and creating clear visual hierarchies within a cohesive dark aesthetic. It's an excellent choice for designers aiming for a clean, modern, and serious feel, ensuring clarity and an understated elegance in digital and print media.

Best used for

  • High-performance automotive branding
  • Dark mode application interfaces
  • Cybersecurity and data analytics platforms
  • Modern art gallery websites
  • Luxury product showcases
  • Architectural firm portfolios

Suggested color roles

primary

#2A2A2A - An exceptionally deep, almost pure black charcoal, ideal for robust backgrounds, headers, or foundational structural elements, establishing a powerful anchor.

secondary

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

accent

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

background

#5A5A5A - A balanced mid-dark grey that serves as a sophisticated content background, allowing both darker and lighter elements to maintain clarity.

text

#A6A6A6 or near-white on darker backgrounds like #2A2A2A or #3D3D3D. For lighter backgrounds like #808080, a dark charcoal like #2A2A2A ensures excellent readability.

Accessibility notes

  • Ensure sufficient contrast when using #808080 or #A6A6A6 for text on mid-range greys like #5A5A5A.
  • Dark text, such as #2A2A2A, on the light #A6A6A6 background provides optimal readability.
  • Avoid low-contrast combinations like #5A5A5A text on a #3D3D3D background for critical information.
  • Always verify WCAG AA contrast standards, especially for smaller font sizes and interactive elements.

Recommended combinations

Intense Depth

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

#2A2A2A · #3D3D3D · #5A5A5A

Subtle Movement

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

#5A5A5A · #808080 · #A6A6A6

Clear Visibility

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

#2A2A2A · #A6A6A6 · #3D3D3D

CSS variables

:root {
  --volcanic-ash-fields-4-1: #3D3D3D;
  --volcanic-ash-fields-4-2: #5A5A5A;
  --volcanic-ash-fields-4-3: #808080;
  --volcanic-ash-fields-4-4: #A6A6A6;
  --volcanic-ash-fields-4-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-fields-4": {
        1: "#3D3D3D",
        2: "#5A5A5A",
        3: "#808080",
        4: "#A6A6A6",
        5: "#2A2A2A",
      }
    }
  }
}

Related searches

dark grey monochrome web designintense ash color paletteminimalist black and grey UIprofessional dark mode themevolcanic rock inspired colors

Palette colors

Hex values

Color 1#3D3D3D
·
Color 2#5A5A5A
·
Color 3#808080
·
Color 4#A6A6A6
·
Color 5#2A2A2A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
4.5:1AA18
1.3:1Fail
2
1.6:1Fail
1.7:1Fail
2.8:1Fail
2.1:1Fail
3
2.8:1Fail
1.7:1Fail
1.6:1Fail
3.6:1AA18
4
4.5:1AA18
2.8:1Fail
1.6:1Fail
5.9:1AA
5
1.3:1Fail
2.1:1Fail
3.6:1AA18
5.9:1AA

Similar palettes

More like Volcanic Ash Fields

View all monochrome
Smoldering Ash Plume
Volcanic Ash Drift
Volcanic Ash Glaze
Volcanic Cinder Trail
Basalt Column Grey
Licorice Drop