Palette

Volcanic Fire Ember

Intense, glowing reds and oranges mirroring the molten core and fiery embers 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 Fire Ember 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 Fire Ember.

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

Data visualization

#800000#DC143C#FF4500#FFA500#CD853F

Palette guide

How to use Volcanic Fire Ember

Overview

The Volcanic Fire Ember palette delivers an intense, glowing warmth, mirroring the molten core and fiery embers of a volcano. With deep reds like #800000 and vibrant crimsons such as #DC143C, it transitions beautifully into bold oranges (#FF4500, #FFA500) and a grounding #CD853F. This palette is designed for projects demanding high energy and a passionate feel. Developers can employ the brighter hues for interactive states, while designers will find its rich depth perfect for creating impactful visual narratives that evoke power and heat.

Best used for

Gaming company branding
Spicy food product packaging
Action movie promotional materials
High-octane event websites
Automotive performance branding
Fashion for bold, statement pieces

Suggested color roles

primary

#800000 - A deep, powerful red suitable for main branding elements, large headers, or backgrounds.

secondary

#DC143C - A vibrant crimson, excellent for subheadings, secondary calls-to-action, or graphic elements.

accent

#FFA500 - A bright, energetic orange, perfect for highlighting key information, interactive elements, or notifications.

background

#CD853F - A warm, earthy brown that can serve as a softer background, or use a dark charcoal/black for stark contrast.

text

#FF4500 - Can be used for large, bold headings on dark backgrounds; for body text, use white or a very light cream.

Accessibility notes

Ensure text in #FF4500 or #FFA500 has sufficient contrast against darker backgrounds like #800000.
Avoid using #800000 and #DC143C for small text against each other due to low contrast.
For readability, use white or a very light neutral color for body text, especially on the darkest hues.
Test all color pairings for WCAG AA or AAA compliance, particularly for interactive elements.

Recommended combinations

Molten Core

Creates a dynamic gradient, perfect for hero sections or captivating background elements.

#800000 · #DC143C · #FF4500

Ember Glow

Ideal for highlighting specific content or creating a warm, inviting glow effect.

#CD853F · #FFA500 · #FF4500

Fiery Accent

Use for strong calls-to-action or important alerts against a deep red base.

#800000 · #FFA500 · #DC143C

CSS variables

:root {
  --volcanic-fire-ember-1: #800000;
  --volcanic-fire-ember-2: #DC143C;
  --volcanic-fire-ember-3: #FF4500;
  --volcanic-fire-ember-4: #FFA500;
  --volcanic-fire-ember-5: #CD853F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-fire-ember": {
        1: "#800000",
        2: "#DC143C",
        3: "#FF4500",
        4: "#FFA500",
        5: "#CD853F",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#DC143C

Color 3#FF4500

Color 4#FFA500

Color 5#CD853F

Accessibility

Contrast checker

2.2:1Fail

3.2:1AA18

5.5:1AA

3.7:1AA18

2.2:1Fail

1.5:1Fail

2.5:1Fail

1.7:1Fail

3.2:1AA18

1.5:1Fail

1.7:1Fail

1.2:1Fail

5.5:1AA

2.5:1Fail

1.7:1Fail

1.5:1Fail

3.7:1AA18

1.7:1Fail

1.2:1Fail

1.5:1Fail

Similar palettes

More like Volcanic Fire Ember

Volcanic Fire Ember

See it in context.

Ready when you are.

Built with Volcanic Fire Ember.

How to use Volcanic Fire Ember

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Molten Core

Ember Glow

Fiery Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Fire Ember