Back to palettes

Palette

Magma Flow Eruption

An intense burst of deep reds and fiery oranges, depicting the raw power of a volcanic eruption.

VibrantEnergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Magma Flow Eruption 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 Magma Flow Eruption.

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

Data visualization

#B80F0A#E42B00#FF5C00#FFA700#2E0A08

Palette guide

How to use Magma Flow Eruption

Overview

The Magma Flow Eruption palette embodies the raw power and energetic burst of a volcanic eruption, featuring an intense range of deep reds and fiery oranges. This vibrant scheme is perfect for designs that demand immediate attention and convey dynamic energy. Key colors include the powerful `#B80F0A`, the vivid `#FF5C00`, and the deep, smoky foundation of `#2E0A08`. It's a high-contrast palette that ensures visual impact, making it suitable for brands that want to communicate strength, excitement, and a touch of danger. Developers can use these distinct shades for clear visual hierarchies.

Best used for

  • High-energy sports branding and apparel
  • Action game interfaces and splash screens
  • Emergency and warning signal designs
  • Automotive design accents and interiors
  • Music festival promotions and posters
  • Dramatic film titles and promotional materials

Suggested color roles

primary

Designate `#B80F0A` as the core, intense red, suitable for primary branding elements or critical alerts that need to stand out forcefully.

secondary

Use `#E42B00` for dynamic elements, active user interface states, or as a vibrant accent that suggests movement and heat.

accent

Apply `#FFA700` as the brightest highlight, ideal for glowing effects, small icons, or to simulate extreme heat and molten flow.

background

Employ `#2E0A08` as a deep, smoldering background, providing a stable, dark base that makes the fiery reds and oranges pop dramatically.

text

For optimal readability, use white or a very light grey on dark backgrounds like `#2E0A08`. `#FFA700` can also serve as a striking text color on darker elements.

Accessibility notes

  • Ensure sufficient contrast when using `#FFA700` or `#FF5C00` for text on `#2E0A08` to meet WCAG AA guidelines.
  • Avoid placing the vibrant reds and oranges too close in value without adequate spacing to prevent visual fatigue.
  • Text on `#B80F0A` or `#E42B00` should be white or a very light color for best readability.
  • Provide alternative visual cues for color-coded information, especially with the close red-orange range.

Recommended combinations

Eruptive Core

Excellent for a powerful brand identity, combining the core reds with a deep, grounding dark background.

#B80F0A · #E42B00 · #2E0A08

Fiery Ascent

Creates a vibrant, energetic gradient, perfect for dynamic progress indicators or visual metaphors of rising intensity.

#FF5C00 · #FFA700 · #B80F0A

Smoldering Edge

Ideal for dark mode themes, using the deep dark as a base with the intense red and orange for interactive elements.

#2E0A08 · #B80F0A · #FF5C00

CSS variables

:root {
  --magma-flow-eruption-1: #B80F0A;
  --magma-flow-eruption-2: #E42B00;
  --magma-flow-eruption-3: #FF5C00;
  --magma-flow-eruption-4: #FFA700;
  --magma-flow-eruption-5: #2E0A08;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-flow-eruption": {
        1: "#B80F0A",
        2: "#E42B00",
        3: "#FF5C00",
        4: "#FFA700",
        5: "#2E0A08",
      }
    }
  }
}

Related searches

volcanic eruption colorsfiery red orange paletteenergetic brand colorshigh contrast red palettelava flow aesthetic

Palette colors

Hex values

Color 1#B80F0A
·
Color 2#E42B00
·
Color 3#FF5C00
·
Color 4#FFA700
·
Color 5#2E0A08
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.5:1AA18
2.7:1Fail
2
1.5:1Fail
1.5:1Fail
2.3:1Fail
4:1AA18
3
2.2:1Fail
1.5:1Fail
1.6:1Fail
5.8:1AA
4
3.5:1AA18
2.3:1Fail
1.6:1Fail
9.3:1AAA
5
2.7:1Fail
4:1AA18
5.8:1AA
9.3:1AAA

Similar palettes

More like Magma Flow Eruption

View all Vibrant