Palette

Volcanic Ash Dawn

A stark, brooding palette reflecting the somber beauty of dawn after a volcanic eruption, with hints of hidden warmth.

neutraldark5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#363636#616161#B34747#A9A9A9#E0DDCF

Palette guide

How to use Volcanic Ash Dawn

Overview

The "Volcanic Ash Dawn" palette offers a stark yet subtly warm aesthetic, drawing inspiration from the muted light after a volcanic eruption. This versatile collection features deep charcoal #363636 and a mid-tone grey #616161, balanced by the soft, almost beige #E0DDCF. A striking accent comes from the rich, earthy red #B34747, complemented by a lighter ash grey #A9A9A9. Ideal for projects aiming for sophistication with an underlying sense of drama or natural rawness, this palette provides a robust foundation for branding, digital interfaces, or print designs that require depth and understated elegance. Its unique blend of cool neutrals and a fiery accent makes it memorable.

Best used for

High-end architectural visualization
Dark mode UI themes for sophisticated apps
Branding for artisan crafts or natural products
Photography portfolio websites
Editorial design with a serious tone
Interior design concepts for modern, minimalist spaces

Suggested color roles

primary

#363636 - A deep, grounding charcoal, perfect for large backgrounds, main containers, or sophisticated typography. It establishes a strong, stable foundation.

secondary

#616161 - A versatile mid-grey that works well for secondary content, card backgrounds, or subtle UI elements, providing contrast to the primary while maintaining cohesion.

accent

#B34747 - A striking, earthy red, excellent for calls-to-action, highlighted information, or graphic elements that need to capture immediate attention and convey warmth.

background

#E0DDCF - A soft, light greige that offers a gentle, expansive canvas. Ideal for main page backgrounds, providing a subtle warmth and excellent readability for dark text.

text

#363636 or #616161 on lighter backgrounds like #E0DDCF for body text. For dark backgrounds, a light color such as #E0DDCF offers good contrast.

Accessibility notes

Ensure sufficient contrast when using #616161 or #A9A9A9 for text on backgrounds like #E0DDCF; check WCAG AA standards.
The vibrant #B34747 accent should be used carefully for text, ensuring it meets contrast ratios against its background, especially for important information.
Dark text like #363636 on the light #E0DDCF background provides excellent readability for most users.
Avoid placing #A9A9A9 text directly on #E0DDCF as contrast might be insufficient for smaller font sizes.

Recommended combinations

Subtle Depth

Creates a sophisticated, layered monochromatic feel, ideal for UI elements like sidebars, cards, and subtle gradients.

#363636 · #616161 · #A9A9A9

Fiery Contrast

A high-contrast combination perfect for hero sections or calls-to-action, where the red provides a dramatic focal point against light and dark.

#E0DDCF · #B34747 · #363636

Earthy Muted

Excellent for soft, natural interfaces or content blocks where a gentle transition between tones is desired, offering calm and readability.

#616161 · #A9A9A9 · #E0DDCF

CSS variables

:root {
  --volcanic-ash-dawn-3-1: #363636;
  --volcanic-ash-dawn-3-2: #616161;
  --volcanic-ash-dawn-3-3: #B34747;
  --volcanic-ash-dawn-3-4: #A9A9A9;
  --volcanic-ash-dawn-3-5: #E0DDCF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-dawn-3": {
        1: "#363636",
        2: "#616161",
        3: "#B34747",
        4: "#A9A9A9",
        5: "#E0DDCF",
      }
    }
  }
}

Hex values

Color 1#363636

Color 2#616161

Color 3#B34747

Color 4#A9A9A9

Color 5#E0DDCF

Accessibility

Contrast checker

2:1Fail

2.2:1Fail

5.1:1AA

8.9:1AAA

2:1Fail

1.2:1Fail

2.6:1Fail

4.5:1AA

2.2:1Fail

1.2:1Fail

2.3:1Fail

3.9:1AA18

5.1:1AA

2.6:1Fail

2.3:1Fail

1.7:1Fail

8.9:1AAA

4.5:1AA

3.9:1AA18

1.7:1Fail

Similar palettes

More like Volcanic Ash Dawn

Haunted Library Pages

Volcanic Ash Haze

Crumbled Castle Remnants