Back to palettes

Palette

Volcanic Ember Glow

Deep, smoldering blacks and reds transition to fiery oranges, reflecting the raw power of volcanic embers.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#3B1B0F#6D2E1A#A04A2A#D06D3C

Palette guide

How to use Volcanic Ember Glow

Overview

The Volcanic Ember Glow palette offers a captivating spectrum from deep, smoldering blacks to fiery oranges, perfect for designs that aim to convey raw power and intensity. Starting with a near-black #0A0A0A and transitioning through rich browns like #3B1B0F and #6D2E1A, it culminates in vibrant oranges like #A04A2A and #D06D3C. This palette is excellent for creating depth and a sense of energetic warmth, making it suitable for high-impact digital experiences or print materials. Designers can use the darker tones for foundational elements and the brighter oranges for striking accents.

Best used for

  • High-energy sports branding
  • Adventure travel websites
  • Dynamic video game UI
  • Restaurant menus with a warm ambiance
  • Automotive marketing materials
  • Concert and event posters

Suggested color roles

primary

#0A0A0A - A deep, grounding black, perfect for main backgrounds, navigation, or strong foundational elements.

secondary

#3B1B0F - Use for sub-sections, dark overlays, or subtle shading, adding warmth without losing depth.

accent

#D06D3C - The brightest orange, ideal for calls-to-action, interactive elements, or key information that needs to pop.

background

#0A0A0A - Provides a solid, dark canvas for most elements, allowing the fiery oranges to truly glow.

text

#A04A2A - Suitable for large headings or graphical text on very dark backgrounds; for body text, use white or a very light cream.

Accessibility notes

  • Ensure #D06D3C text against #0A0A0A or #3B1B0F has sufficient contrast, especially for body text.
  • Avoid placing #3B1B0F or #6D2E1A text on the darkest background #0A0A0A.
  • Use white or a very light grey for primary body text on darker backgrounds to maximize readability.
  • Verify contrast ratios for all interactive elements to meet WCAG guidelines.

Recommended combinations

Deep Ember

Creates a sophisticated, smoldering background or a gradient for dark UI elements.

#0A0A0A · #3B1B0F · #6D2E1A

Fiery Burst

Excellent for high-impact calls-to-action or highlighting important information against a dark canvas.

#0A0A0A · #D06D3C · #A04A2A

Warm Gradient

Ideal for progress indicators, data visualizations, or subtle transitions in hero sections.

#6D2E1A · #A04A2A · #D06D3C

CSS variables

:root {
  --volcanic-ember-glow-1: #0A0A0A;
  --volcanic-ember-glow-2: #3B1B0F;
  --volcanic-ember-glow-3: #6D2E1A;
  --volcanic-ember-glow-4: #A04A2A;
  --volcanic-ember-glow-5: #D06D3C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ember-glow": {
        1: "#0A0A0A",
        2: "#3B1B0F",
        3: "#6D2E1A",
        4: "#A04A2A",
        5: "#D06D3C",
      }
    }
  }
}

Related searches

lava color palettefiery orange and blackenergetic color schemesvolcanic UI designwarm dark aesthetic

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#3B1B0F
·
Color 3#6D2E1A
·
Color 4#A04A2A
·
Color 5#D06D3C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
3.3:1AA18
5.6:1AA
2
1.3:1Fail
1.5:1Fail
2.6:1Fail
4.4:1AA18
3
1.9:1Fail
1.5:1Fail
1.7:1Fail
2.9:1Fail
4
3.3:1AA18
2.6:1Fail
1.7:1Fail
1.7:1Fail
5
5.6:1AA
4.4:1AA18
2.9:1Fail
1.7:1Fail

Similar palettes

More like Volcanic Ember Glow

View all warm
Lava Flow Inferno
Erupting Volcanic Heat
Magma Eruption Glow
Volcano Ember Haze
Fiery Volcanic Veins
Lava Flow