Back to palettes

Palette

Volcanic Ash Cloud

Somber, smoky greys and cool blues reflecting the dramatic aftermath of a volcanic eruption.

neutraldark5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#708090#C0C0C0#2C3E50#5A6E7C

Palette guide

How to use Volcanic Ash Cloud

Overview

The "Volcanic Ash Cloud" palette captures the dramatic aftermath of a volcanic eruption with its somber, smoky greys and cool blues. Anchored by the deep #2C3E50, it features a range of atmospheric tones like #4F4F4F and #708090, perfectly complemented by the ethereal #C0C0C0. The inclusion of #5A6E7C adds a subtle, cool complexity, reminiscent of distant skies through ash clouds. This palette is exceptionally useful for designers and developers aiming to evoke a serious, contemplative, or subtly dramatic mood. It's ideal for projects that require a robust yet refined aesthetic, suggesting stability, depth, and natural power.

Best used for

  • Documentary film branding or websites
  • Environmental or scientific data visualization
  • Weather forecasting applications
  • Corporate interfaces with a serious tone
  • Architectural rendering of modern structures
  • Product design emphasizing durability and strength

Suggested color roles

primary

Establishes a deep, stable foundation, perfect for backgrounds, headers, or primary structural elements with #2C3E50 (Dark Blue-Grey).

secondary

A versatile mid-tone, suitable for main content blocks, cards, or secondary navigation using #4F4F4F (Dark Grey).

accent

Provides a crisp, clean highlight, ideal for interactive elements, delicate icons, or important text with #C0C0C0 (Silver).

background

Creates a moody, sophisticated backdrop that allows lighter grays and blues to stand out, typically #2C3E50 (Dark Blue-Grey).

text

For primary text on dark backgrounds, use #C0C0C0 (Silver); a very light grey is also suitable. #708090 (Light Slate Gray) can be used for secondary text on slightly darker grays.

Accessibility notes

  • Ensure strong contrast between text and background; #C0C0C0 (Silver) on #2C3E50 (Dark Blue-Grey) is effective.
  • Be cautious with combinations like #708090 (Light Slate Gray) on #5A6E7C (Grey-Blue) for small text.
  • Always check WCAG guidelines for all text-background pairings, especially for smaller font sizes.
  • Use the darkest shades for backgrounds and the lightest for text for optimal accessibility.

Recommended combinations

Ashy Sky

Creates a clear hierarchy with bright highlights against a deep, cool base, great for headers.

#2C3E50 · #C0C0C0 · #708090

Misty Layers

Subtle tonal shifts for background textures, card borders, or progressive disclosure.

#4F4F4F · #5A6E7C · #708090

Cloud Depth

A robust combination for branding, evoking strength and atmospheric depth.

#2C3E50 · #4F4F4F · #C0C0C0

CSS variables

:root {
  --volcanic-ash-cloud-1: #4F4F4F;
  --volcanic-ash-cloud-2: #708090;
  --volcanic-ash-cloud-3: #C0C0C0;
  --volcanic-ash-cloud-4: #2C3E50;
  --volcanic-ash-cloud-5: #5A6E7C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-cloud": {
        1: "#4F4F4F",
        2: "#708090",
        3: "#C0C0C0",
        4: "#2C3E50",
        5: "#5A6E7C",
      }
    }
  }
}

Related searches

smoky blue grey palettevolcanic aftermath colorsdark neutral UI schemecool grey blue designindustrial dark palette

Palette colors

Hex values

Color 1#4F4F4F
·
Color 2#708090
·
Color 3#C0C0C0
·
Color 4#2C3E50
·
Color 5#5A6E7C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.5:1AA
1.3:1Fail
1.5:1Fail
2
2:1Fail
2.2:1Fail
2.7:1Fail
1.3:1Fail
3
4.5:1AA
2.2:1Fail
6:1AA
2.9:1Fail
4
1.3:1Fail
2.7:1Fail
6:1AA
2.1:1Fail
5
1.5:1Fail
1.3:1Fail
2.9:1Fail
2.1:1Fail

Similar palettes

More like Volcanic Ash Cloud

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