Back to palettes

Palette

Volcanic Ash Flow

The raw power of a volcanic eruption, with flowing lava against a backdrop of ash and smoke.

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

#4A4A4A#8B0000#FF4500#8C8C8C#D3D3D3

Palette guide

How to use Volcanic Ash Flow

Overview

The Volcanic Ash Flow palette is a dramatic and intense selection, capturing the raw power of an eruption. It features a strong dark grey (#4A4A4A) as a primary anchor, alongside a deep, rich crimson (#8B0000) and a vibrant, fiery orange-red (#FF4500) that symbolize molten lava. Lighter greys, #8C8C8C and #D3D3D3, provide essential contrast and breathability, representing ash and smoke. This palette is ideal for projects that demand attention, conveying energy, danger, or passion, making it suitable for gaming, high-impact marketing, or any design needing a bold, dynamic presence that evokes the intensity of a volcanic event.

Best used for

  • Gaming interfaces and branding
  • Action movie posters/websites
  • Emergency services alerts
  • High-impact marketing campaigns
  • Sports team branding
  • Dark mode UI with vibrant accents

Suggested color roles

primary

#4A4A4A - A solid, dark foundation for backgrounds, headers, and main content areas, providing a strong contrast to the fiery accents.

secondary

#8C8C8C - Use for secondary text, subheadings, or dividers, offering a softer tone against the dark primary without losing definition.

accent

#FF4500 - The main energetic accent. Perfect for calls-to-action, critical alerts, interactive elements, or focal points that need to pop.

background

#D3D3D3 - A very light grey for content cards, pop-ups, or sections where a high contrast to dark text is required.

text

#4A4A4A - Dark text on light backgrounds like #D3D3D3. For text on dark backgrounds, use a near-white or #D3D3D3.

Accessibility notes

  • Ensure #FF4500 and #8B0000 have sufficient contrast against their backgrounds, especially for text.
  • #D3D3D3 provides good contrast for dark text like #4A4A4A.
  • Avoid using #8C8C8C text on #4A4A4A for small body text; reserve for larger headings or UI elements.
  • Test all interactive elements with #FF4500 for clear visibility and accessibility against other dark shades.

Recommended combinations

Fiery Core

A dark base with a vibrant orange accent and a light secondary for stark, energetic visual impact.

#4A4A4A · #FF4500 · #D3D3D3

Deep Ember

Muted grey with a deep crimson accent and dark grey for a more subdued but still intense feel.

#8C8C8C · #8B0000 · #4A4A4A

Ash & Lava

Light background, dark text, and a strong, deep red for emphasis, creating a clear and dramatic hierarchy.

#D3D3D3 · #4A4A4A · #8B0000

CSS variables

:root {
  --volcanic-ash-flow-2-1: #4A4A4A;
  --volcanic-ash-flow-2-2: #8B0000;
  --volcanic-ash-flow-2-3: #FF4500;
  --volcanic-ash-flow-2-4: #8C8C8C;
  --volcanic-ash-flow-2-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ash-flow-2": {
        1: "#4A4A4A",
        2: "#8B0000",
        3: "#FF4500",
        4: "#8C8C8C",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

dramatic red grey palettevolcanic fire colorsash lava color schemebold dark mode palettehigh contrast red grey

Palette colors

Hex values

Color 1#4A4A4A
·
Color 2#8B0000
·
Color 3#FF4500
·
Color 4#8C8C8C
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.6:1Fail
2.6:1Fail
5.9:1AA
2
1.1:1Fail
2.9:1Fail
3:1Fail
6.7:1AA
3
2.6:1Fail
2.9:1Fail
1:1Fail
2.3:1Fail
4
2.6:1Fail
3:1Fail
1:1Fail
2.2:1Fail
5
5.9:1AA
6.7:1AA
2.3:1Fail
2.2:1Fail

Similar palettes

More like Volcanic Ash Flow

View all dark
Basalt Ridge Shadow
Lava Rock Texture
Magma Flow Descent
Volcanic Ash Ember
Volcanic Caldera Ember
Crater Lake Depth