Palette

Fiery Lava Flow

Intense reds and oranges depicting the raw power and heat of a flowing volcanic lava stream.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery 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 Fiery Lava Flow.

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

Data visualization

#8A0000#C52900#F76F00#FFA500#FFD152

Palette guide

How to use Fiery Lava Flow

Overview

The 'Fiery Lava Flow' palette vividly portrays the raw power and intense heat of a flowing volcanic lava stream. This energetic collection transitions from a deep, molten red (#8A0000) through vibrant, scorching oranges (#C52900 and #F76F00) to a bright, glowing amber (#FFA500) and a light, shimmering gold (#FFD152). Ideal for designers and developers building projects that need to convey dynamism, warmth, and an unstoppable force, it’s a truly vibrant and captivating array of hues that command attention and evoke powerful natural phenomena.

Best used for

Adventure sports branding and extreme activities
Energy drink packaging and vibrant food products
Volcanic tourism promotions and travel websites
Digital art backgrounds and motion graphics
Summer event themes and festival branding
Dynamic website headers and hero sections

Suggested color roles

primary

#8A0000 for a strong, grounding base or powerful statements, evoking molten rock.

secondary

#C52900 for supporting elements that require warmth and high visibility.

accent

#F76F00 or #FFA500 for vibrant calls to action, highlights, or interactive elements that glow.

background

A dark neutral (like charcoal or black) to make these colors pop, or #8A0000 for a deep, rich canvas.

text

Use #FFD152 or white for readability on darker reds/oranges, or a dark charcoal on #FFD152 for contrast.

Accessibility notes

The lighter oranges/yellows (#FFA500, #FFD152) will need dark text (e.g., black, #8A0000) for contrast.
Darker reds (#8A0000) require light text (e.g., white, #FFD152) for optimal readability.
Be cautious when using adjacent colors like #F76F00 and #FFA500 for text/background due to low contrast.
Ensure interactive elements are clearly distinguishable through sufficient contrast against their backgrounds.

Recommended combinations

Flowing Gradient

For a dynamic background or visual element that simulates molten movement.

#8A0000 · #F76F00 · #FFD152

Bright CTA

A vibrant call-to-action button with a strong base color and glowing text.

#C52900 · #FFA500 · #8A0000

Highlighted Text

A dark header with bright, readable sub-text, emphasizing key information.

#8A0000 · #FFD152 · #F76F00

CSS variables

:root {
  --fiery-lava-flow-1: #8A0000;
  --fiery-lava-flow-2: #C52900;
  --fiery-lava-flow-3: #F76F00;
  --fiery-lava-flow-4: #FFA500;
  --fiery-lava-flow-5: #FFD152;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-lava-flow": {
        1: "#8A0000",
        2: "#C52900",
        3: "#F76F00",
        4: "#FFA500",
        5: "#FFD152",
      }
    }
  }
}

Hex values

Color 1#8A0000

Color 2#C52900

Color 3#F76F00

Color 4#FFA500

Color 5#FFD152

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

5.1:1AA

7:1AA

1.8:1Fail

2:1Fail

2.9:1Fail

3.9:1AA18

3.5:1AA18

2:1Fail

1.5:1Fail

2:1Fail

5.1:1AA

2.9:1Fail

1.5:1Fail

1.4:1Fail

7:1AA

3.9:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Fiery Lava Flow

Fiery Lava Flow

See it in context.

Ready when you are.

Built with Fiery Lava Flow.

How to use Fiery Lava Flow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Flowing Gradient

Bright CTA

Highlighted Text

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fiery Lava Flow