Palette

Fiery Volcano Ridge

Explodes with the intense, scorching hues of molten lava and burning embers on a volcanic peak.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Volcano Ridge 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 Fiery Volcano Ridge.

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

Data visualization

#8A0303#D42B00#F76F00#FCD96C#5C0202

Palette guide

How to use Fiery Volcano Ridge

Overview

The Fiery Volcano Ridge palette explodes with the scorching hues of molten lava and burning embers on a volcanic peak. It features a profound dark red, #5C0202, and a slightly lighter #8A0303, setting a dramatic base. The intense #D42B00 and vibrant #F76F00 inject fiery energy, while the bright #FCD96C (a golden yellow) simulates superheated rock or distant sunlight. This palette is incredibly energetic, bold, and dramatic, perfect for designs that aim to convey raw power, danger, and a captivating intensity, making a strong and unforgettable visual statement.

Best used for

Adventure travel branding or websites
Action game interfaces or visual effects
Heavy industry or safety equipment design
Warning labels or emergency alerts
Event posters for high-impact performances
Bold, masculine product packaging

Suggested color roles

primary

#5C0202 (The deepest, most grounding dark red, ideal for backgrounds or dominant structural elements.)

secondary

#8A0303 (Used for secondary sections, borders, or large text, offering a slightly lighter, rich contrast.)

accent

#D42B00 (A powerful, attention-grabbing red, perfect for calls to action, interactive elements, or critical information.)

background

#5C0202 (Creates an intense, dramatic backdrop, allowing the fiery accents to truly stand out.)

text

#FCD96C (Excellent for headings and key information on dark backgrounds. For body text, white or a very light grey ensures readability.)

Accessibility notes

Ensure #FCD96C has sufficient contrast against #5C0202, #8A0303, and #D42B00 for all text sizes.
Avoid using #D42B00 or #F76F00 for small text on #8A0303 or #5C0202 due to potential contrast issues for some users.
The yellow #FCD96C on orange #F76F00 might be problematic for readability; use these for distinct elements.
For color-blind users, differentiate between the various reds not solely by hue but also by brightness or surrounding elements.

Recommended combinations

Lava Peak

Ideal for a dramatic hero section or warning banner, conveying extreme heat and power.

#5C0202 · #D42B00 · #F76F00

Burning Embers

Perfect for highlighted information or glowing interactive elements, drawing immediate attention.

#8A0303 · #F76F00 · #FCD96C

Ridge Line

Suitable for layered backgrounds or distinct content blocks, balancing depth with a bright accent.

#5C0202 · #8A0303 · #FCD96C

CSS variables

:root {
  --fiery-volcano-ridge-1: #8A0303;
  --fiery-volcano-ridge-2: #D42B00;
  --fiery-volcano-ridge-3: #F76F00;
  --fiery-volcano-ridge-4: #FCD96C;
  --fiery-volcano-ridge-5: #5C0202;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-volcano-ridge": {
        1: "#8A0303",
        2: "#D42B00",
        3: "#F76F00",
        4: "#FCD96C",
        5: "#5C0202",
      }
    }
  }
}

Hex values

Color 1#8A0303

Color 2#D42B00

Color 3#F76F00

Color 4#FCD96C

Color 5#5C0202

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

7.3:1AAA

1.4:1Fail

2:1Fail

1.7:1Fail

3.7:1AA18

2.8:1Fail

3.5:1AA18

1.7:1Fail

2.1:1Fail

4.9:1AA