Palette

Volcanic Ash Flow

Somber greys and smoldering reds capture the intense, raw power of a volcanic eruption and cooling lava.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3A47#5A2C2A#8F3D39#C1574C#E37A6D

Palette guide

How to use Volcanic Ash Flow

Overview

This Volcanic Ash Flow palette masterfully blends somber greys with a progression of smoldering reds, capturing the intense, raw power of an eruption and cooling lava. The deep, almost black-blue grey (#2C3A47) provides a strong, mysterious foundation, while the rich, dark red-brown (#5A2C2A) introduces warmth and depth. A series of vibrant yet earthy reds (#8F3D39, #C1574C, #E37A6D) simulate the lava's glow and cooling process, offering a dynamic range for accents and highlights. This palette is excellent for designs seeking a dramatic, sophisticated, and slightly ominous mood, suitable for storytelling, luxury brands with an edge, or immersive digital experiences.

Best used for

Luxury automotive branding
Dark-themed editorial websites
Art gallery digital presence
High-end product showcases
Cinematic title sequences
Mysterious or gothic fashion brands

Suggested color roles

primary

#2C3A47 - A deep, authoritative base color for main layouts, headers, and backgrounds, conveying sophistication and depth.

secondary

#5A2C2A - Useful for secondary content blocks, large subheadings, or interactive elements that need a dark, earthy red tone.

accent

#C1574C - A striking, mid-range red for calls-to-action, critical notifications, or graphical elements that demand immediate attention.

background

#E37A6D - A softer, lighter red that can be used for subtle background textures, hover states, or as a vibrant card background.

text

#E37A6D - For vibrant text on dark backgrounds like #2C3A47. Alternatively, use a crisp white or light grey for readability.

Accessibility notes

Text in #E37A6D on #2C3A47 should have good contrast, but smaller text might need testing for WCAG AA compliance.
Avoid using #5A2C2A on #2C3A47 for body text due to low contrast; reserve for larger titles or decorative elements.
Ensure interactive elements like buttons using #C1574C have clear focus and hover states.
Consider using a very light grey or white for primary text on the darker colors like #2C3A47 and #5A2C2A.

Recommended combinations

Lava Flow

Dark base with a striking red accent and a lighter red for highlights, creating a dynamic flow.

#2C3A47 · #C1574C · #E37A6D

Smoldering Depths

A deep red-brown with a brighter red accent and dark grey for a rich, intense, and sophisticated look.

#5A2C2A · #8F3D39 · #2C3A47

Ash & Ember

A dark background contrasted with a lighter red text and a medium red for interactive elements, ensuring readability and vibrancy.

#2C3A47 · #E37A6D · #8F3D39

CSS variables

:root {
  --volcanic-ash-flow-1: #2C3A47;
  --volcanic-ash-flow-2: #5A2C2A;
  --volcanic-ash-flow-3: #8F3D39;
  --volcanic-ash-flow-4: #C1574C;
  --volcanic-ash-flow-5: #E37A6D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-flow": {
        1: "#2C3A47",
        2: "#5A2C2A",
        3: "#8F3D39",
        4: "#C1574C",
        5: "#E37A6D",
      }
    }
  }
}

Hex values

Color 1#2C3A47

Color 2#5A2C2A

Color 3#8F3D39

Color 4#C1574C

Color 5#E37A6D

Accessibility

Contrast checker

1:1Fail

1.6:1Fail

2.6:1Fail

4:1AA18

1:1Fail

1.6:1Fail

2.6:1Fail

4:1AA18

1.6:1Fail

2.5:1Fail

2.6:1Fail

1.6:1Fail

1.5:1Fail

4:1AA18

2.5:1Fail

1.5:1Fail

Similar palettes

More like Volcanic Ash Flow

Volcanic Ash Flow

See it in context.

Ready when you are.

Built with Volcanic Ash Flow.

How to use Volcanic Ash Flow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Lava Flow

Smoldering Depths

Ash & Ember

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Ash Flow