Back to palettes

Palette

Volcanic Ash

Somber, smoky greys that evoke the raw, textured beauty of volcanic landscapes.

neutraldark5 colors
More neutral 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

#2C3539#404C52#5B6C72#81959C#AEBEC4

Palette guide

How to use Volcanic Ash

Overview

The "Volcanic Ash" palette is a sophisticated collection of somber, smoky greys, evoking the raw and textured beauty of post-eruption landscapes. Featuring a range from the deep, grounding #2C3539 to the lighter, ethereal #AEBEC4, this palette offers designers and developers a versatile foundation for minimalist and robust designs. The mid-tones like #5B6C72 and #81959C provide excellent gradients and layering opportunities, allowing for depth without sacrificing a clean aesthetic. This monochromatic-leaning scheme is perfect for conveying stability, seriousness, and natural elegance, making it ideal for professional interfaces, architectural visualizations, or understated branding.

Best used for

  • Corporate websites and dashboards
  • Minimalist interior design concepts
  • Industrial product design interfaces
  • Photography portfolios
  • Architectural visualization
  • Brand identities emphasizing strength and durability

Suggested color roles

primary

Establishes a solid, grounding base, ideal for backgrounds or primary structural elements with #2C3539 (Deep Grey-Blue).

secondary

Offers a slightly lighter but equally robust tone for main content blocks or secondary navigation using #404C52 (Dark Grey-Blue).

accent

Provides subtle contrast and highlights, suitable for interactive elements or delicate text with #AEBEC4 (Light Grey-Blue).

background

Creates a strong, professional backdrop that allows lighter elements to emerge, typically #2C3539 (Deep Grey-Blue).

text

For headings and prominent text, use #AEBEC4 (Light Grey-Blue); a very light grey or near-white is recommended for body text against darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast between all text and background combinations, especially for lighter shades like #AEBEC4 on #81959C.
  • Use #AEBEC4 for text on #2C3539 or #404C52 for optimal readability.
  • Avoid using adjacent shades like #404C52 and #5B6C72 for text/background unless contrast is checked.
  • Consider a pure white text on the darkest shades for maximum WCAG AA/AAA compliance.

Recommended combinations

Ash Layers

Creates a sense of depth and hierarchy, perfect for layered UI components.

#2C3539 · #5B6C72 · #AEBEC4

Subtle Contrast

Offers gentle visual separation, suitable for data visualizations or soft transitions.

#404C52 · #81959C · #AEBEC4

Solid Ground

A strong base with light highlights, great for headers or call-to-action buttons.

#2C3539 · #AEBEC4 · #5B6C72

CSS variables

:root {
  --volcanic-ash-2-1: #2C3539;
  --volcanic-ash-2-2: #404C52;
  --volcanic-ash-2-3: #5B6C72;
  --volcanic-ash-2-4: #81959C;
  --volcanic-ash-2-5: #AEBEC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-2": {
        1: "#2C3539",
        2: "#404C52",
        3: "#5B6C72",
        4: "#81959C",
        5: "#AEBEC4",
      }
    }
  }
}

Related searches

smoky grey color paletteminimalist blue grey schemeindustrial neutral colorsrugged earth tonesprofessional dark grey palette

Palette colors

Hex values

Color 1#2C3539
·
Color 2#404C52
·
Color 3#5B6C72
·
Color 4#81959C
·
Color 5#AEBEC4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.3:1Fail
4:1AA18
6.5:1AA
2
1.4:1Fail
1.6:1Fail
2.8:1Fail
4.6:1AA
3
2.3:1Fail
1.6:1Fail
1.8:1Fail
2.9:1Fail
4
4:1AA18
2.8:1Fail
1.8:1Fail
1.6:1Fail
5
6.5:1AA
4.6:1AA
2.9:1Fail
1.6:1Fail

Similar palettes

More like Volcanic Ash

View all neutral
Volcanic Ash Dawn
Volcanic Ash Cloud
Volcanic Ash Drift
Haunted Library Pages
Volcanic Ash Haze
Crumbled Castle Remnants