Back to palettes

Palette

Volcanic Crater Ash

A stark, smoky palette reflecting the muted power of volcanic ash and desolate landscapes.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4A4A4A#6C6C6C#8E8E8E#AAAAAA

Palette guide

How to use Volcanic Crater Ash

Overview

This monochromatic "Volcanic Crater Ash" palette features a range of deep to light greys, including the profound #2C2C2C, the balanced #6C6C6C, and the soft #AAAAAA. It evokes a stark, sophisticated, and minimalist aesthetic, perfect for designs requiring a sense of grounded stability and quiet strength. Developers will find these shades excellent for creating subtle depth and visual hierarchy without introducing color distractions, making them versatile for UI elements, typography, and background textures. Its muted power is ideal for conveying seriousness and elegance.

Best used for

  • Minimalist website designs
  • Corporate branding and professional documents
  • Dark mode UI themes
  • Photography portfolios
  • Architectural visualizations
  • High-end product packaging

Suggested color roles

primary

#2C2C2C - Establish a strong, dark foundation for backgrounds or dominant UI elements, conveying depth.

secondary

#4A4A4A - Use for main content sections, secondary navigation, or large typography blocks to add slight variation.

accent

#AAAAAA - A lighter grey for subtle highlights, interactive states, or delicate graphic details to add contrast.

background

#2C2C2C - Provides a deep, immersive backdrop, allowing lighter elements to stand out with understated elegance.

text

#AAAAAA or #8E8E8E - For primary text on dark backgrounds, ensuring readability while maintaining the palette's muted feel.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for #6C6C6C and #8E8E8E on #2C2C2C.
  • Use #AAAAAA for body text on #2C2C2C or #4A4A4A to meet WCAG AA standards.
  • Avoid using adjacent shades like #6C6C6C and #8E8E8E for critical information or small text.
  • Test contrast ratios for all interactive elements to guarantee usability for all users.

Recommended combinations

Stark Contrast

Ideal for high-contrast text and background, with a mid-tone for secondary details or dividers.

#2C2C2C · #AAAAAA · #6C6C6C

Muted Depth

Creates a gradual progression of tones for layered interfaces or subtle graphical elements.

#4A4A4A · #8E8E8E · #2C2C2C

Soft Gradient

Excellent for subtle gradients, hover states, or background patterns that require gentle transitions.

#6C6C6C · #8E8E8E · #AAAAAA

CSS variables

:root {
  --volcanic-crater-ash-1: #2C2C2C;
  --volcanic-crater-ash-2: #4A4A4A;
  --volcanic-crater-ash-3: #6C6C6C;
  --volcanic-crater-ash-4: #8E8E8E;
  --volcanic-crater-ash-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-crater-ash": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#8E8E8E",
        5: "#AAAAAA",
      }
    }
  }
}

Related searches

dark grey color schememonochromatic ash paletteelegant grey web designmuted charcoal colorsminimalist ui greys

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#6C6C6C
·
Color 4#8E8E8E
·
Color 5#AAAAAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.3:1AA18
6:1AA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
3.8:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.3:1Fail
4
4.3:1AA18
2.7:1Fail
1.6:1Fail
1.4:1Fail
5
6:1AA
3.8:1AA18
2.3:1Fail
1.4:1Fail

Similar palettes

More like Volcanic Crater Ash

View all monochrome
Smoldering Ash Plume
Volcanic Ash Drift
Volcanic Ash Fields
Volcanic Cinder Trail
Ancient Tomb Relic
Basalt Column Grey