Palette

Molten Lava Burst

A molten collection of reds and oranges, capturing the intense heat and raw power of a volcanic eruption.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Molten Lava Burst 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 Molten Lava Burst.

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

Data visualization

#8B0000#CD5C5C#FF4500#FF8C00#FFA07A

Palette guide

How to use Molten Lava Burst

Overview

The Molten Lava Burst palette ignites designs with intense, fiery energy, capturing the raw power of a volcanic eruption. This vibrant collection moves from deep red to bright orange, featuring striking shades like the vivid #FF4500 (OrangeRed) and the rich #8B0000 (DarkRed). Designers can leverage this palette to create high-impact visuals that demand attention, while developers will appreciate the clear hierarchy enabled by its range of warm tones. The lighter #FFA07A (LightSalmon) offers a glowing accent, perfectly complementing the robust #CD5C5C (IndianRed) and the energetic #FF8C00 (DarkOrange). This palette is ideal for projects needing a powerful, energetic, and unforgettable visual statement.

Best used for

High-energy brand identities and logos
Gaming interfaces and streaming overlays
Sports team branding and merchandise
Warning and alert notifications in UI/UX
Dramatic digital art and illustrations
Adventure and extreme sports marketing

Suggested color roles

primary

Use #FF4500 (OrangeRed) as a vibrant, energetic focal point for calls to action or key headlines, drawing immediate attention.

secondary

Employ #8B0000 (DarkRed) for grounding elements, strong borders, or important subheadings, providing depth and stability.

accent

Apply #FFA07A (LightSalmon) for glowing highlights, interactive states, or subtle background textures where a soft warmth is desired.

background

Consider #CD5C5C (IndianRed) for a warm, inviting background that's less overwhelming than pure red, or a very dark neutral for high contrast.

text

Pair white or a very light grey for readability on darker shades like #8B0000, and use a dark charcoal or black on lighter tones like #FFA07A.

Accessibility notes

Ensure sufficient contrast when pairing lighter colors like #FFA07A with other palette shades for text readability.
Avoid using shades like #FF4500 directly on #FF8C00 for text to prevent low contrast issues for users with color vision deficiencies.
Always test text against backgrounds; white text on #8B0000 offers excellent contrast, while black on #FFA07A is also strong.
Use a contrast checker to verify WCAG compliance for all text and interactive element color combinations.

Recommended combinations

Dynamic Duo

Ideal for headlines and calls to action, with the deepest red grounding the vibrant orange and soft highlight.

#8B0000 · #FF4500 · #FFA07A

Fiery Contrast

Excellent for layered UI elements, where a warm mid-tone supports a bright accent against a deep base.

#CD5C5C · #FF8C00 · #8B0000

Vibrant Glow

Perfect for energetic visual elements, gradients, or illustrations depicting light and heat, creating a luminous effect.

#FF4500 · #FF8C00 · #FFA07A

CSS variables

:root {
  --molten-lava-burst-1: #8B0000;
  --molten-lava-burst-2: #CD5C5C;
  --molten-lava-burst-3: #FF4500;
  --molten-lava-burst-4: #FF8C00;
  --molten-lava-burst-5: #FFA07A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-lava-burst": {
        1: "#8B0000",
        2: "#CD5C5C",
        3: "#FF4500",
        4: "#FF8C00",
        5: "#FFA07A",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#CD5C5C

Color 3#FF4500

Color 4#FF8C00

Color 5#FFA07A

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

4.3:1AA18

5:1AA

2.5:1Fail

1.2:1Fail

1.7:1Fail

2:1Fail

2.9:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

4.3:1AA18

1.7:1Fail

1.5:1Fail

1.2:1Fail

5:1AA

2:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Molten Lava Burst

Molten Lava Burst

See it in context.

Ready when you are.

Built with Molten Lava Burst.

How to use Molten Lava Burst

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dynamic Duo

Fiery Contrast

Vibrant Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Molten Lava Burst