Palette

Volcanic Lava Flow

Intense reds and oranges capture the raw, fiery power and dangerous beauty 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 Lava Flow 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 Lava Flow.

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

Data visualization

#3D0000#950101#FF0000#FF5A00#FFAA00

Palette guide

How to use Volcanic Lava Flow

Overview

The Volcanic Lava Flow palette embodies the raw, fiery power and dangerous beauty of molten lava, making it ideal for designs that demand high energy and intensity. This collection features deep, dramatic reds transitioning to vibrant oranges, providing a striking visual narrative. Key colors include the profound #3D0000, the intense #FF0000, and the glowing #FFAA00. Designers can leverage this palette to create powerful branding, while developers will find these hues perfect for high-impact user interfaces, warning signals, or dynamic visual effects. It's a choice for projects where an unmistakable sense of urgency or excitement is paramount.

Best used for

Action-oriented brands and extreme sports
Warning systems and emergency alerts
Gaming interfaces and high-energy digital experiences
Event promotions for concerts or festivals
Automotive and performance product branding
Science fiction or fantasy themed media

Suggested color roles

primary

Use #FF0000 as an unmistakable, strong primary for critical calls-to-action or focal points.

secondary

Apply #FF5A00 for supporting elements, subheadings, or progress indicators to maintain intensity.

accent

Highlight with #FFAA00 for the brightest glow, drawing attention to urgent information or interactive states.

background

Employ #3D0000 as a deep, dramatic background to provide stark contrast and depth.

text

For dark backgrounds like #3D0000 or #950101, use white or a very light grey. For brighter colors like #FFAA00, use black or dark charcoal for readability.

Accessibility notes

High contrast is crucial for text on these intense colors; ensure WCAG AA standards are met.
Avoid using #FF0000 and #FF5A00 for adjacent small text elements due to their strong similarity in value.
Utilize ample white space to prevent the intensity of the colors from overwhelming users.
Ensure focus states for interactive elements are clearly distinguishable, perhaps using a light outline or shadow.

Recommended combinations

Molten Core

Creates a dramatic progression from deep red to bright, glowing orange, ideal for gradients.

#3D0000 · #FF0000 · #FFAA00

Warning Signal

Provides a strong, high-contrast combination perfect for alerts or urgent messages.

#FF0000 · #FF5A00 · #3D0000

Fiery Glow

Offers a vibrant and energetic blend, suitable for active states or dynamic visual effects.

#950101 · #FF5A00 · #FFAA00

CSS variables

:root {
  --volcanic-lava-flow-1: #3D0000;
  --volcanic-lava-flow-2: #950101;
  --volcanic-lava-flow-3: #FF0000;
  --volcanic-lava-flow-4: #FF5A00;
  --volcanic-lava-flow-5: #FFAA00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-lava-flow": {
        1: "#3D0000",
        2: "#950101",
        3: "#FF0000",
        4: "#FF5A00",
        5: "#FFAA00",
      }
    }
  }
}

Hex values

Color 1#3D0000

Color 2#950101

Color 3#FF0000

Color 4#FF5A00

Color 5#FFAA00

Accessibility

Contrast checker

1.9:1Fail

4.4:1AA18

5.6:1AA

9.2:1AAA

1.9:1Fail

2.3:1Fail

2.9:1Fail

4.8:1AA

4.4:1AA18

2.3:1Fail

1.3:1Fail

2.1:1Fail

5.6:1AA

2.9:1Fail

1.3:1Fail

1.6:1Fail

9.2:1AAA

4.8:1AA

2.1:1Fail

1.6:1Fail

Similar palettes

More like Volcanic Lava Flow