Back to palettes

Palette

Volcanic Ember Burst

A powerful and dramatic palette inspired by the smoldering depths and fiery eruptions of a volcano.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#FF4500#CD5C5C#DAA520#808080

Palette guide

How to use Volcanic Ember Burst

Overview

The "Volcanic Ember Burst" palette is a powerful and dramatic collection, inspired by smoldering depths and fiery eruptions. It grounds itself with a dark slate grey #36454F and a neutral #808080, then erupts with vibrant accents like #FF4500 (Orange Red), #CD5C5C (Indian Red), and #DAA520 (Goldenrod). This palette is excellent for designs requiring intensity, energy, and a touch of raw elegance. Designers can use it for impactful branding, while developers will appreciate the clear contrast for creating dynamic and engaging user interfaces.

Best used for

  • Dramatic web design and branding
  • Gaming UI for adventure or fantasy themes
  • Event promotion and marketing materials
  • Food and beverage branding (e.g., spicy products)
  • Outdoor and survival gear websites
  • Themed app interfaces

Suggested color roles

primary

#36454F - A deep, dark slate grey for foundational backgrounds or main content areas, providing stability.

secondary

#808080 - A balanced mid-grey for secondary content, dividers, or subtle textural elements, offering neutrality.

accent

#FF4500 - A brilliant orange-red for critical calls to action, warnings, or key interactive elements, signifying energy.

background

#36454F - Establishes a profound, dark setting, allowing the fiery reds and goldenrod to glow intensely.

text

#DAA520 or white for primary text on dark backgrounds, ensuring readability and a vibrant touch.

Accessibility notes

  • Ensure #FF4500 and #DAA520 have sufficient contrast against #36454F for text and interactive elements.
  • #808080 text on #36454F might have low contrast; use a lighter grey or white for body text.
  • Prioritize high contrast for all critical information and interactive components.
  • Test readability of #CD5C5C on both light and dark backgrounds.

Recommended combinations

Fiery Eruption

Creates a bold, high-energy focal point, ideal for urgent messages or striking graphical elements.

#36454F · #FF4500 · #CD5C5C

Glowing Ember

Blends warm glowing tones, excellent for gradients, hover effects, or accentuating details.

#808080 · #DAA520 · #FF4500

Grounded Drama

A sophisticated combination for content blocks, balancing a dark base with vibrant, warm highlights.

#36454F · #DAA520 · #CD5C5C

CSS variables

:root {
  --volcanic-ember-burst-1: #36454F;
  --volcanic-ember-burst-2: #FF4500;
  --volcanic-ember-burst-3: #CD5C5C;
  --volcanic-ember-burst-4: #DAA520;
  --volcanic-ember-burst-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-ember-burst": {
        1: "#36454F",
        2: "#FF4500",
        3: "#CD5C5C",
        4: "#DAA520",
        5: "#808080",
      }
    }
  }
}

Related searches

volcanic red grey paletteember glow color schemedramatic warm dark colorsfiery ui designgoldenrod and red palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#FF4500
·
Color 3#CD5C5C
·
Color 4#DAA520
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
2.5:1Fail
4.4:1AA18
2.5:1Fail
2
2.9:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail
3
2.5:1Fail
1.2:1Fail
1.8:1Fail
1:1Fail
4
4.4:1AA18
1.5:1Fail
1.8:1Fail
1.8:1Fail
5
2.5:1Fail
1.1:1Fail
1:1Fail
1.8:1Fail

Similar palettes

More like Volcanic Ember Burst

View all warm
Volcanic Rim Sunset
Crimson Tide
Desert Fire Dance
Ember Forge Glow
Fiery Canyon Walls
Fiery Volcanic Veins