Palette

Volcanic Heart Glow

Fiery reds and oranges dance like a vibrant, crackling flame, full of warmth and energy.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#FF4500#FFA500#FFD700#FF6347

Palette guide

How to use Volcanic Heart Glow

Overview

The Volcanic Heart Glow palette radiates warmth and intense energy, drawing inspiration from a vibrant, crackling flame. This collection of fiery reds and oranges is designed for impactful, dynamic visual experiences. Key colors include the deep, dramatic red #8B0000, the striking vermilion #FF4500, and the brilliant golden-yellow #FFD700. Ideal for projects demanding attention and conveying passion, this palette provides a rich spectrum from molten core to glowing embers, ensuring your designs feel both powerful and inviting. Developers can leverage these hues for high-energy UI elements, while designers will find them perfect for creating captivating brand identities.

Best used for

High-energy brand identities and marketing
Calls-to-action and urgent notifications
Gaming interfaces and vibrant digital art
Festive and celebratory event promotions
Food and beverage packaging or branding
Youth-focused media and entertainment

Suggested color roles

primary

Use #FF4500 as a vibrant, energetic primary for main headlines or key interactive elements.

secondary

Apply #FFA500 for supporting content areas, subheadings, or secondary buttons to maintain warmth.

accent

Highlight critical information or interactive states with the brilliant #FFD700 for a glowing effect.

background

Employ #8B0000 for dramatic, deep backgrounds that evoke intensity and depth.

text

For optimal contrast on brighter colors like #FFD700 or #FFA500, use a dark charcoal or black. On #8B0000, use white or a very light grey.

Accessibility notes

Ensure sufficient contrast when pairing #FFD700 or #FFA500 with text, as their brightness can reduce readability.
Avoid using #FF6347 and #FF4500 for small text together, as their similar hues might challenge colorblind users.
Leverage a dark background like #8B0000 for text to maximize legibility with lighter palette colors.
Test all color combinations for WCAG AA or AAA compliance, especially for critical UI elements.

Recommended combinations

Molten Core

For a powerful, glowing effect, moving from deep red to bright yellow.

#8B0000 · #FF4500 · #FFD700

Ember Glow

Creates a lively, warm, and inviting blend perfect for vibrant sections.

#FF4500 · #FFA500 · #FF6347

Deep Flame

Offers a strong contrast with a deep base and bright, energetic highlights.

#8B0000 · #FF6347 · #FFA500

CSS variables

:root {
  --volcanic-heart-glow-1: #8B0000;
  --volcanic-heart-glow-2: #FF4500;
  --volcanic-heart-glow-3: #FFA500;
  --volcanic-heart-glow-4: #FFD700;
  --volcanic-heart-glow-5: #FF6347;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-heart-glow": {
        1: "#8B0000",
        2: "#FF4500",
        3: "#FFA500",
        4: "#FFD700",
        5: "#FF6347",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#FF4500

Color 3#FFA500

Color 4#FFD700

Color 5#FF6347

Accessibility

Contrast checker

2.9:1Fail

5.1:1AA

7.1:1AAA

3.4:1AA18

2.9:1Fail

1.7:1Fail

2.5:1Fail

1.2:1Fail

5.1:1AA

1.7:1Fail

1.4:1Fail

1.5:1Fail

7.1:1AAA

2.5:1Fail

1.4:1Fail

2.1:1Fail

3.4:1AA18

1.2:1Fail

1.5:1Fail

2.1:1Fail

Similar palettes

More like Volcanic Heart Glow