Palette

Magma Eruption Glow

Captures the intense, fiery energy and molten beauty of an active volcanic eruption.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Magma Eruption 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 Magma Eruption Glow.

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

Data visualization

#800000#B22222#DC143C#FF4500#FFD700

Palette guide

How to use Magma Eruption Glow

Overview

The 'Magma Eruption Glow' palette captures the intense, fiery energy and molten beauty of an active volcanic eruption. It features a deep maroon (#800000), a rich brick red (#B22222), a vibrant crimson (#DC143C), a blazing orange-red (#FF4500), and a bright golden yellow (#FFD700). This collection is for designers and developers seeking to evoke power, urgency, and dynamic warmth. It's excellent for projects requiring a bold, energetic, and visually striking aesthetic, capable of creating powerful visual impact and a sense of dramatic heat and light.

Best used for

Action-oriented video game interfaces
Sports team branding and merchandise
Energy drink or extreme sports promotions
Emergency services or warning systems
High-performance technology websites
Dynamic event posters and flyers

Suggested color roles

primary

Use #DC143C as a vibrant primary color for focal points or key brand elements, signifying energy and urgency.

secondary

Apply #800000 as a deep, grounding secondary color for backgrounds or large sections, creating depth and stability.

accent

Introduce #FFD700 for high-impact calls-to-action, warnings, or dynamic highlights, demanding immediate attention.

background

Utilize #B22222 as a rich, warm background, providing an excellent canvas that enhances the fiery accents.

text

For optimal readability on these dark and intense shades, use a bright, near-white text color like #F8F8F8, ensuring strong contrast.

Accessibility notes

Ensure critical text elements use a very light color (e.g., #F8F8F8) against dark backgrounds for high contrast.
Avoid using #800000 or #B22222 for small text on similar dark backgrounds, as contrast might be insufficient.
Verify interactive elements have clear visual cues and sufficient contrast in their default, hover, and active states.
When using #FFD700 as an accent, ensure it contrasts well with surrounding colors, especially for interactive elements.

Recommended combinations

Erupting Core

Creates a deep, intensifying gradient effect, perfect for backgrounds or dramatic content sections.

#800000 · #B22222 · #DC143C

Fiery Burst

Ideal for high-energy calls-to-action, alerts, or highlighting crucial information with maximum impact.

#DC143C · #FF4500 · #FFD700

Molten Depth

A powerful combination for main headers, feature sections, or gaming UI elements, combining depth with luminous glow.

#B22222 · #FFD700 · #800000

CSS variables

:root {
  --magma-eruption-glow-1: #800000;
  --magma-eruption-glow-2: #B22222;
  --magma-eruption-glow-3: #DC143C;
  --magma-eruption-glow-4: #FF4500;
  --magma-eruption-glow-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-eruption-glow": {
        1: "#800000",
        2: "#B22222",
        3: "#DC143C",
        4: "#FF4500",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#B22222

Color 3#DC143C

Color 4#FF4500

Color 5#FFD700

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

3.2:1AA18

7.8:1AAA

1.6:1Fail

1.3:1Fail

1.9:1Fail

4.8:1AA

2.2:1Fail

1.3:1Fail

1.5:1Fail

3.6:1AA18