Palette

Volcanic Ember Flow

Captures the deep, smoldering power of molten lava and cooling volcanic rock formations.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C0A0A#8C1B0B#B33E2B#E66E4F#3A0505

Palette guide

How to use Volcanic Ember Flow

Overview

The Volcanic Ember Flow palette captures a dramatic, smoldering intensity, ideal for projects needing a powerful and earthy yet fiery aesthetic. Featuring deep, rich reds like #5C0A0A and #3A0505 complemented by warmer, brighter embers such as #B33E2B and #E66E4F, this collection evokes molten lava and cooling rock. Designers can leverage its depth for impactful branding, while developers will appreciate the distinct contrast between the darkest and brightest hues for UI elements, ensuring visual hierarchy. This palette is excellent for creating a sense of natural power and raw energy across digital and print mediums.

Best used for

Dramatic website hero sections
Gaming interfaces and themes
Adventure brand identity
Movie poster designs
Product packaging for intense flavors
Event promotions with a powerful theme

Suggested color roles

primary

#5C0A0A - Use for dominant sections, main headers, or backgrounds requiring a deep, grounded presence.

secondary

#8C1B0B - Excellent for subheadings, call-to-action buttons, or secondary navigation, providing a strong but less intense contrast.

accent

#E66E4F - Reserve this bright, fiery orange for interactive elements, highlights, or critical notifications to draw immediate attention.

background

#3A0505 - A very dark, almost black-red, perfect for creating a deep, immersive background that allows brighter elements to pop.

text

#B33E2B - Suitable for lighter text on dark backgrounds, or use a stark white for maximum readability over #3A0505.

Accessibility notes

Ensure sufficient contrast when pairing #E66E4F (lightest) with #3A0505 (darkest) for text.
Avoid using #5C0A0A and #3A0505 together for small text due to low contrast.
Consider white or a very light grey for text over all darker reds for improved readability.
Test colorblind compatibility, as reds can be challenging; provide alternative visual cues where possible.

Recommended combinations

Deep Ember

Ideal for creating a sophisticated, dark gradient or layering background elements with subtle depth.

#3A0505 · #5C0A0A · #8C1B0B

Fiery Highlight

Effective for call-to-action buttons or highlighted information against a dark base.

#5C0A0A · #E66E4F · #B33E2B

Molten Flow

Great for progress bars, infographics, or dynamic elements showing transition from warm to hot.

#8C1B0B · #B33E2B · #E66E4F

CSS variables

:root {
  --volcanic-ember-flow-1: #5C0A0A;
  --volcanic-ember-flow-2: #8C1B0B;
  --volcanic-ember-flow-3: #B33E2B;
  --volcanic-ember-flow-4: #E66E4F;
  --volcanic-ember-flow-5: #3A0505;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ember-flow": {
        1: "#5C0A0A",
        2: "#8C1B0B",
        3: "#B33E2B",
        4: "#E66E4F",
        5: "#3A0505",
      }
    }
  }
}

Hex values

Color 1#5C0A0A

Color 2#8C1B0B

Color 3#B33E2B

Color 4#E66E4F

Color 5#3A0505

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

4.5:1AA18

1.2:1Fail

1.5:1Fail

1.6:1Fail

2.9:1Fail

1.9:1Fail

2.4:1Fail

1.6:1Fail

1.8:1Fail

3:1AA18

4.5:1AA18

2.9:1Fail

1.8:1Fail

5.6:1AA

1.2:1Fail

1.9:1Fail

3:1AA18

5.6:1AA

Similar palettes

More like Volcanic Ember Flow