Palette

Volcanic Glow

Fiery reds and deep oranges capture the intense, dramatic glow of molten lava from a volcano.

warmdark5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4500#FF0000#8B0000#A52A2A#660000

Palette guide

How to use Volcanic Glow

Overview

The Volcanic Glow palette is a vibrant and intense collection of fiery reds and deep oranges, embodying the raw power and dramatic glow of molten lava. This palette leverages #FF4500 for vivid highlights, #FF0000 for pure intensity, and #660000 for grounding depth, creating an energetic and passionate aesthetic suitable for high-impact designs. Designers and developers can utilize #8B0000 and #A52A2A to build nuanced layers and visual hierarchy within this warm spectrum. It's perfect for projects that demand immediate attention, conveying urgency, excitement, or a strong emotional response, reminiscent of a blazing volcano.

Best used for

Gaming interfaces and branding
Warning systems and critical alerts
Sports team branding and merchandise
Energetic marketing campaigns
Dramatic event promotions and posters
Food and beverage brands with spicy products

Suggested color roles

primary

Use #FF4500 for attention-grabbing elements, calls to action, or key brand highlights.

secondary

Apply #FF0000 for alerts, critical information, or strong branding elements requiring pure intensity.

accent

Utilize #8B0000 for subtle depth, shadows, or interactive states, adding a rich, dark red accent.

background

Choose #660000 for a deep, warm, and dramatic foundation that anchors the fiery palette.

text

For maximum readability, use "#FFFFFF" (white) or a very light grey for all text on these intense red and orange backgrounds.

Accessibility notes

Crucial to use white or very light text on all colors (#FF4500, #FF0000, #8B0000, #A52A2A, #660000) for readability.
Avoid red-on-red or similar red-on-orange text pairings as they will have insufficient contrast.
Always test text legibility across various devices and ambient lighting conditions to ensure visibility.
Ensure interactive elements have clear visual states beyond just color, such as underlines or icons.

Recommended combinations

Fiery Core

Establishes the main brand colors, active states, and primary interactive elements with high impact.

#FF0000 · #FF4500 · #8B0000

Deep Warmth

Creates rich backgrounds, secondary elements, and provides depth to the overall composition.

#660000 · #A52A2A · #8B0000

Alert System

Ideal for warnings, critical alerts, or urgent calls to action, ensuring high visibility with white text.

#FF4500 · #FF0000 · #8B0000

CSS variables

:root {
  --volcanic-glow-1: #FF4500;
  --volcanic-glow-2: #FF0000;
  --volcanic-glow-3: #8B0000;
  --volcanic-glow-4: #A52A2A;
  --volcanic-glow-5: #660000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glow": {
        1: "#FF4500",
        2: "#FF0000",
        3: "#8B0000",
        4: "#A52A2A",
        5: "#660000",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#FF0000

Color 3#8B0000

Color 4#A52A2A

Color 5#660000

Accessibility

Contrast checker

1.2:1Fail

2.9:1Fail

2.1:1Fail

3.9:1AA18

1.2:1Fail

2.5:1Fail

1.8:1Fail

3.4:1AA18

2.9:1Fail

2.5:1Fail

1.4:1Fail

1.3:1Fail

2.1:1Fail

1.8:1Fail

1.4:1Fail

1.9:1Fail

3.9:1AA18

3.4:1AA18

1.3:1Fail

1.9:1Fail

Similar palettes

More like Volcanic Glow