Back to palettes

Palette

Volcanic Rock Ash

Raw and powerful, capturing the somber, textured beauty of a landscape shaped by volcanic ash.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2A2A2A#404040#5B5B5B#777777#949494

Palette guide

How to use Volcanic Rock Ash

Overview

The "Volcanic Rock Ash" palette is a powerful, monochromatic grey scheme that perfectly captures the somber, textured beauty of a landscape shaped by volcanic ash. Ranging from the deep, grounding `#2A2A2A` to the lighter, ethereal `#949494`, it offers a sophisticated gradient of cool tones. This palette provides excellent versatility for creating minimalist, robust, and modern designs, allowing designers and developers to build clear visual hierarchies and convey a sense of strength, stability, and understated elegance.

Best used for

  • Industrial design aesthetics
  • Minimalist websites and applications
  • Dark mode UI/UX themes
  • Architectural renderings and portfolios
  • Tech branding and corporate identity
  • Rugged outdoor gear marketing

Suggested color roles

primary

Use `#404040` as a solid, dark foundation for main content areas or primary navigation.

secondary

Apply `#5B5B5B` as a mid-tone for secondary sections, borders, or subtle visual separations.

accent

Utilize `#777777` for subtle highlights, interactive states, or subdued graphical elements.

background

Employ `#2A2A2A` as a deep, immersive dark background, providing a sense of depth and focus.

text

For optimal readability on dark backgrounds, use `#949494` for body text or a crisp white for critical headings and calls to action.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using `#777777` on `#5B5B5B`.
  • Use `#949494` for main body text against darker shades like `#2A2A2A` or `#404040` for WCAG compliance.
  • Avoid using darker greys as text on lighter greys within the palette without carefully checking contrast ratios.
  • Consider using a true white or near-white for critical text elements on the darkest backgrounds for maximum legibility.

Recommended combinations

Ashy Depth

Creates a deep base with a contrasting light element, ideal for dark mode headers and text.

#2A2A2A · #404040 · #949494

Rocky Texture

Layers mid-tones with a strong dark anchor, useful for textured backgrounds or multi-level UI elements.

#5B5B5B · #777777 · #2A2A2A

Subtle Gradient

Provides a smooth, understated progression for visual depth in backgrounds or component states.

#404040 · #5B5B5B · #777777

CSS variables

:root {
  --volcanic-rock-ash-1: #2A2A2A;
  --volcanic-rock-ash-2: #404040;
  --volcanic-rock-ash-3: #5B5B5B;
  --volcanic-rock-ash-4: #777777;
  --volcanic-rock-ash-5: #949494;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-ash": {
        1: "#2A2A2A",
        2: "#404040",
        3: "#5B5B5B",
        4: "#777777",
        5: "#949494",
      }
    }
  }
}

Related searches

dark grey color palettevolcanic ash colorsrugged grey schememonochromatic dark themesubtle industrial palette

Palette colors

Hex values

Color 1#2A2A2A
·
Color 2#404040
·
Color 3#5B5B5B
·
Color 4#777777
·
Color 5#949494
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.2:1AA18
4.7:1AA
2
1.4:1Fail
1.5:1Fail
2.3:1Fail
3.4:1AA18
3
2.1:1Fail
1.5:1Fail
1.5:1Fail
2.2:1Fail
4
3.2:1AA18
2.3:1Fail
1.5:1Fail
1.5:1Fail
5
4.7:1AA
3.4:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Rock Ash

View all Dark
Haunted Hallway Gloom
Stormy Lake Mist
Volcanic Glass
Abyssal Bioluminescence
Abyssal Seaweed Garden
Dark Academia Ink