Palette

Volcanic Flow Surge

Intense, fiery colors depicting the powerful and unstoppable surge of molten lava.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B22222#FF4500#FFA500#FFD700#8B0000

Palette guide

How to use Volcanic Flow Surge

Overview

The Volcanic Flow Surge palette is an intense and fiery collection depicting the powerful and unstoppable surge of molten lava. Ranging from a deep, vibrant red #8B0000 to a brilliant gold #FFD700, with strong oranges like #FF4500 and #FFA500 in between, this palette is bursting with energy. Designers can harness its dynamism for impactful branding and striking visuals. Developers will find the bright, distinct hues perfect for creating highly visible interactive elements and calls-to-action, ensuring a visually engaging and energetic user experience.

Best used for

High-impact advertising campaigns
Energy drink branding
Sports event promotions
Warning or alert systems
Fire and rescue services branding
Festival and concert visuals

Suggested color roles

primary

#8B0000 - A deep, strong red, ideal for foundational elements, prominent headlines, or branding that commands attention.

secondary

#B22222 - A vibrant red, excellent for subheadings, navigation, or secondary graphic elements.

accent

#FFD700 - The brightest, most luminous gold, perfect for critical calls-to-action, awards, or urgent notifications.

background

#8B0000 - A powerful background for designs that aim for intensity; pair with white or light text.

text

#FFA500 - Suitable for large, bold text on very dark backgrounds; for body text, use white or a very light neutral.

Accessibility notes

Ensure #FFD700 and #FFA500 text has sufficient contrast against #8B0000 or #B22222 backgrounds.
Avoid using #8B0000 and #B22222 for text/background pairings in small font sizes.
White or a very light grey is recommended for primary body text on these intense colors to ensure readability.
Verify contrast for all interactive components to meet WCAG standards.

Recommended combinations

Lava Core

Creates a powerful, intensifying gradient for hero sections or dynamic backgrounds.

#8B0000 · #B22222 · #FF4500

Golden Surge

Ideal for highlighting key features, achievements, or premium content against a deep red.

#8B0000 · #FFD700 · #FFA500

Fiery Transition

Excellent for progress bars, data visualizations, or animated elements showing energy flow.

#FF4500 · #FFA500 · #FFD700

CSS variables

:root {
  --volcanic-flow-surge-1: #B22222;
  --volcanic-flow-surge-2: #FF4500;
  --volcanic-flow-surge-3: #FFA500;
  --volcanic-flow-surge-4: #FFD700;
  --volcanic-flow-surge-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-flow-surge": {
        1: "#B22222",
        2: "#FF4500",
        3: "#FFA500",
        4: "#FFD700",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#B22222

Color 2#FF4500

Color 3#FFA500

Color 4#FFD700

Color 5#8B0000

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

4.8:1AA

1.5:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

2.9:1Fail

3.4:1AA18

1.7:1Fail

1.4:1Fail

5.1:1AA

4.8:1AA

2.5:1Fail

1.4:1Fail

7.1:1AAA

1.5:1Fail

2.9:1Fail

5.1:1AA

7.1:1AAA

Similar palettes

More like Volcanic Flow Surge