Palette

Volcanic Ash Glow

Subtle gradients of dark greys and black, evoking the quiet, smoldering presence 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 Glow 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 Glow.

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

Data visualization

#4F4F4F#2A2A2A#686868#1A1A1A#8F8F8F

Palette guide

How to use Volcanic Ash Glow

Overview

The Volcanic Ash Glow palette presents subtle gradients of dark greys and black, evoking the quiet, smoldering presence of volcanic ash with an underlying glow. Anchored by a deep, impactful black (#1A1A1A) and a strong dark charcoal (#2A2A2A), it progresses through versatile medium greys (#4F4F4F, #686868) to a luminous light grey (#8F8F8F). This monochrome collection is perfect for creating moody, minimalist, and sophisticated designs where atmosphere and depth are key. It's particularly effective for dark mode applications, luxury branding, or any project that benefits from a strong, elegant, and unobtrusive visual foundation that allows content to truly stand out.

Best used for

Luxury brand websites (dark mode)
High-end product showcases
Photography portfolio sites
Cinematic digital experiences
Minimalist art gallery apps
Exclusive membership platforms

Suggested color roles

primary

#1A1A1A - The deepest, most impactful shade, ideal for main backgrounds, footers, or large hero sections, providing maximum depth.

secondary

#2A2A2A - A strong dark charcoal for secondary content areas, navigation bars, or card backgrounds, offering subtle contrast.

accent

#8F8F8F - The lightest shade, perfect for subtle highlights, interactive elements, or key text that needs to stand out against darker greys.

background

#4F4F4F - A versatile medium-dark grey that can serve as a primary content background, offering a soft yet moody feel.

text

#8F8F8F - Excellent for primary text on darker backgrounds like #1A1A1A or #2A2A2A, ensuring crisp readability.

Accessibility notes

Ensure #8F8F8F text on #1A1A1A or #2A2A2A backgrounds meets WCAG AA contrast.
Avoid using adjacent greys like #4F4F4F and #686868 for small body text; reserve for larger headings or UI elements.
Test interactive elements for clear visual feedback, especially hover/focus states.
For light mode, use #1A1A1A for text on #8F8F8F to achieve optimal contrast.

Recommended combinations

Deep Glow

A profound black background with a luminous light grey for text and a dark charcoal for secondary elements, creating a high-contrast elegant look.

#1A1A1A · #8F8F8F · #2A2A2A

Moody Layers

Layered dark greys for subtle depth in UI components, ideal for sophisticated dark mode designs.

#2A2A2A · #4F4F4F · #686868

Subtle Highlight

A medium-dark grey background with black text and a light grey for accents, ensuring clarity and a moody aesthetic.

#686868 · #1A1A1A · #8F8F8F

CSS variables

:root {
  --volcanic-ash-glow-1: #4F4F4F;
  --volcanic-ash-glow-2: #2A2A2A;
  --volcanic-ash-glow-3: #686868;
  --volcanic-ash-glow-4: #1A1A1A;
  --volcanic-ash-glow-5: #8F8F8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-glow": {
        1: "#4F4F4F",
        2: "#2A2A2A",
        3: "#686868",
        4: "#1A1A1A",
        5: "#8F8F8F",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#2A2A2A

Color 3#686868

Color 4#1A1A1A

Color 5#8F8F8F

Accessibility

Contrast checker

1.8:1Fail

1.5:1Fail

2.1:1Fail

2.5:1Fail

1.8:1Fail

2.6:1Fail

1.2:1Fail

4.4:1AA18

1.5:1Fail

2.6:1Fail

3.1:1AA18

1.7:1Fail

2.1:1Fail

1.2:1Fail

3.1:1AA18

5.4:1AA

2.5:1Fail

4.4:1AA18

1.7:1Fail

5.4:1AA

Similar palettes

More like Volcanic Ash Glow

View all dark

Midnight Stone Garden