Palette

Volcanic Ash Glaze

A subdued, elegant monochrome capturing the subtle textures and profound depths of cooled volcanic ash.

monochromeminimal5 colors

More monochrome 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

#1A1A1A#36454F#5A6269#778899#A9A9A9

Palette guide

How to use Volcanic Ash Glaze

Overview

The Volcanic Ash Glaze palette is a subdued, elegant monochrome offering, capturing the subtle textures and profound depths of cooled volcanic ash. Starting with an almost absolute black (#1A1A1A), it transitions through rich charcoal (#36454F), a cool medium grey (#5A6269), a soft slate grey (#778899), and finally a luminous dark grey (#A9A9A9). This gradient provides incredible versatility for creating sophisticated dark mode interfaces, minimalist branding, or editorial designs that require a refined, understated aesthetic. Its inherent neutrality makes it an excellent base for designs where texture and subtle tonal shifts are paramount, allowing content to speak for itself.

Best used for

Minimalist dark mode interfaces
High-end tech product websites
Luxury minimalist branding
Photography portfolios (monochrome)
Architectural design presentations
Elegant editorial layouts

Suggested color roles

primary

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

secondary

#36454F - A strong, dark grey for secondary backgrounds, navigation, or card elements, offering a slight contrast to the primary.

accent

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

background

#5A6269 - A mid-tone grey suitable for content areas, panels, or as a background for lighter text elements.

text

#A9A9A9 - Excellent for primary text on darker backgrounds like #1A1A1A or #36454F, ensuring readability.

Accessibility notes

Ensure #A9A9A9 text on #1A1A1A or #36454F backgrounds meets WCAG AA contrast ratios.
Avoid using adjacent greys like #5A6269 and #778899 for text and background combinations for small text.
Test interactive elements for clear visual feedback, especially hover/focus states.
Use #1A1A1A for text on #A9A9A9 for optimal contrast in a light context.

Recommended combinations

Deep Ash

A stark black background with light grey text and a charcoal secondary for a classic, high-contrast dark theme.

#1A1A1A · #A9A9A9 · #36454F

Subtle Gradient

Layered greys for depth in UI elements, creating a sophisticated monochromatic visual hierarchy.

#36454F · #5A6269 · #778899

Highlight Contrast

A medium grey background with dark text, accented by a light grey for interactive elements or key information.

#778899 · #1A1A1A · #A9A9A9

CSS variables

:root {
  --volcanic-ash-glaze-2-1: #1A1A1A;
  --volcanic-ash-glaze-2-2: #36454F;
  --volcanic-ash-glaze-2-3: #5A6269;
  --volcanic-ash-glaze-2-4: #778899;
  --volcanic-ash-glaze-2-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-glaze-2": {
        1: "#1A1A1A",
        2: "#36454F",
        3: "#5A6269",
        4: "#778899",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#36454F

Color 3#5A6269

Color 4#778899

Color 5#A9A9A9

Accessibility

Contrast checker

1.8:1Fail

2.8:1Fail

4.8:1AA

7.4:1AAA

1.8:1Fail

1.6:1Fail

2.7:1Fail

4.2:1AA18

2.8:1Fail

1.6:1Fail

1.7:1Fail

2.6:1Fail

4.8:1AA

2.7:1Fail

1.7:1Fail

1.5:1Fail

7.4:1AAA

4.2:1AA18

2.6:1Fail

1.5:1Fail

Similar palettes

More like Volcanic Ash Glaze

View all monochrome

Ancient Volcanic Ash

Charcoal Graphite Tones

Granite Quarry Scale

Midnight Tea Ceremony

Monochromatic Ink Wash

Monochrome Smoke Flow