Palette

Volcanic Ash

Somber greys and deep blacks capture the stark, powerful beauty and destructive force of volcanic ash.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F1F1F#3A3A3A#5E5E5E#8C8C8C#B5B5B5

Palette guide

How to use Volcanic Ash

Overview

The "Volcanic Ash" palette embodies the stark, powerful beauty of a volcanic landscape, offering a range of somber grays and deep blacks. From the intense #1F1F1F to the lighter #B5B5B5, including versatile mid-tones like #3A3A3A and #5E5E5E, this collection provides depth and sophistication. Designers can harness these robust hues to create dramatic, high-contrast designs, professional dark mode interfaces, or branding that conveys strength and seriousness. The consistent cool undertones make it ideal for tech, luxury, or architectural projects seeking a refined and powerful aesthetic. It's particularly effective for establishing a strong visual presence.

Best used for

Dark mode web and app interfaces
Luxury brand identity
Architectural visualization
High-tech product design
Professional photography websites
Abstract art displays

Suggested color roles

primary

#1F1F1F - A deep, almost pure black, ideal for main backgrounds, navigation, or strong headers, providing ultimate depth.

secondary

#3A3A3A - A robust charcoal gray, suitable for secondary content areas, dividers, or subtle accents against the primary.

accent

#B5B5B5 - The lightest gray, perfect for subtle highlights, interactive states, or delicate outlines against darker elements.

background

#1F1F1F - The darkest shade, creating a dramatic, immersive, and sophisticated backdrop for any design.

text

#B5B5B5 - For clear, readable text on dark backgrounds, ensuring excellent contrast, or a deep black like #1F1F1F for body text on light elements.

Accessibility notes

Ensure high contrast between text and background, especially when using #8C8C8C on #5E5E5E for small text.
Body text should ideally use #B5B5B5 on #1F1F1F or #3A3A3A for optimal readability in dark themes.
Avoid using adjacent grays (e.g., #3A3A3A and #5E5E5E) for critical information without additional visual cues.
Test contrast ratios for all interactive elements to ensure they are clearly distinguishable for all users.

Recommended combinations

Deep Contrast

Creates a striking dark theme with brilliant readability for primary text and secondary details.

#1F1F1F · #B5B5B5 · #3A3A3A

Grayscale Sophistication

Excellent for layered UI components, subheadings, and subtle visual hierarchy in a dark context.

#3A3A3A · #5E5E5E · #8C8C8C

Stark Minimalist

Use the darkest for background, lightest for main text, and mid-tone for secondary UI elements.

#1F1F1F · #B5B5B5 · #5E5E5E

CSS variables

:root {
  --volcanic-ash-1: #1F1F1F;
  --volcanic-ash-2: #3A3A3A;
  --volcanic-ash-3: #5E5E5E;
  --volcanic-ash-4: #8C8C8C;
  --volcanic-ash-5: #B5B5B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash": {
        1: "#1F1F1F",
        2: "#3A3A3A",
        3: "#5E5E5E",
        4: "#8C8C8C",
        5: "#B5B5B5",
      }
    }
  }
}

Hex values

Color 1#1F1F1F

Color 2#3A3A3A

Color 3#5E5E5E

Color 4#8C8C8C

Color 5#B5B5B5

Accessibility

Contrast checker

1.4:1Fail

2.5:1Fail

4.9:1AA

8:1AAA

1.4:1Fail

1.8:1Fail

3.4:1AA18

5.5:1AA

2.5:1Fail

1.8:1Fail

1.9:1Fail

3.2:1AA18

4.9:1AA

3.4:1AA18

1.9:1Fail

1.6:1Fail

8:1AAA

5.5:1AA

3.2:1AA18

1.6:1Fail

Similar palettes

More like Volcanic Ash

View all dark

Obsidian Flow Edge

Volcanic Cinder Cone

Volcanic Obsidian Edge

Basalt Edge

Cosmic Void Depths

Deep Volcanic Glass