Palette

Volcanic Ash Glaze

Stark greys and fiery undertones, mimicking the cool strength of volcanic ash with hints of deep, latent heat.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2B2B#5C5C5C#A9A9A9#B22222#D2691E

Palette guide

How to use Volcanic Ash Glaze

Overview

This Volcanic Ash Glaze palette combines stark greys with fiery undertones, mimicking the cool strength of volcanic ash with hints of deep, latent heat. It features a strong, near-black (#2B2B2B) as a foundational dark, complemented by a versatile medium grey (#5C5C5C) and a lighter, luminous grey (#A9A9A9). The powerful accents come from a deep, intense firebrick red (#B22222) and a rich, earthy chocolate orange (#D2691E), suggesting molten rock beneath a cooled surface. This palette is excellent for designs that need to convey strength, drama, and a touch of raw energy, suitable for rugged brands, high-impact digital experiences, or projects with a bold, masculine aesthetic.

Best used for

Outdoor adventure brands
Heavy machinery websites
Action game UI
Industrial design presentations
Men's fashion/grooming brands
Dark mode UI with warm accents

Suggested color roles

primary

#2B2B2B - A deep, commanding base color for backgrounds, headers, and large content areas, providing strong visual weight.

secondary

#5C5C5C - A versatile mid-grey for secondary content, borders, or subtle background textures, offering a softer contrast.

accent

#B22222 - A powerful, striking red for calls-to-action, critical alerts, or key interactive elements that demand attention.

background

#A9A9A9 - A light-medium grey that can serve as a content background or for cards, offering a clean canvas for darker text.

text

#A9A9A9 - For primary text on dark backgrounds like #2B2B2B. Use a dark grey or black for text on #A9A9A9.

Accessibility notes

Ensure #A9A9A9 text on #2B2B2B or #5C5C5C backgrounds meets WCAG AA contrast.
Text on #B22222 and #D2691E may require white or very light grey text to be readable.
Avoid using #5C5C5C on #A9A9A9 for small body text; use for larger headings.
Test all interactive elements with accent colors for clear visual feedback and accessibility.

Recommended combinations

Molten Core

A dark foundation with a bold red accent and light grey for contrast, creating a high-impact, energetic feel.

#2B2B2B · #B22222 · #A9A9A9

Earth & Fire

A mid-grey base with an earthy orange accent and dark grey for depth, suitable for rugged, natural themes.

#5C5C5C · #D2691E · #2B2B2B

Ash Glow

Light grey background with dark text, accented by a strong red for emphasis and interactive elements.

#A9A9A9 · #2B2B2B · #B22222

CSS variables

:root {
  --volcanic-ash-glaze-5-1: #2B2B2B;
  --volcanic-ash-glaze-5-2: #5C5C5C;
  --volcanic-ash-glaze-5-3: #A9A9A9;
  --volcanic-ash-glaze-5-4: #B22222;
  --volcanic-ash-glaze-5-5: #D2691E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-glaze-5": {
        1: "#2B2B2B",
        2: "#5C5C5C",
        3: "#A9A9A9",
        4: "#B22222",
        5: "#D2691E",
      }
    }
  }
}

Hex values

Color 1#2B2B2B

Color 2#5C5C5C

Color 3#A9A9A9

Color 4#B22222

Color 5#D2691E

Accessibility

Contrast checker

2.1:1Fail

6:1AA

2.1:1Fail

3.9:1AA18

2.1:1Fail

2.8:1Fail

1:1Fail

1.8:1Fail

6:1AA

2.8:1Fail

1.5:1Fail

2.1:1Fail

1:1Fail

2.8:1Fail

1.8:1Fail

3.9:1AA18

1.8:1Fail

1.5:1Fail

1.8:1Fail

Similar palettes

More like Volcanic Ash Glaze

Volcanic Ash Glaze

See it in context.

Ready when you are.

Built with Volcanic Ash Glaze.

How to use Volcanic Ash Glaze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Molten Core

Earth & Fire

Ash Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Ash Glaze