Back to palettes

Palette

Lava Flow

Intense and powerful, depicting the raw, fiery energy of molten lava against dark volcanic rock.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D32F2F#E64A19#FF7043#FFAB40#8C1C0C

Palette guide

How to use Lava Flow

Overview

The Lava Flow palette is intense and powerful, depicting the raw, fiery energy of molten lava against dark volcanic rock. This energetic collection, featuring vibrant reds like #D32F2F and #8C1C0C, alongside fiery oranges such as #E64A19 and #FFAB40, is perfect for designers and developers aiming to create a dynamic and impactful visual experience. It offers a progression from deep, smoldering tones to bright, eruptive highlights, providing versatility for projects that demand attention. This palette is excellent for applications requiring a bold, energetic, and unforgettable aesthetic.

Best used for

  • Action-oriented brand identities
  • Sports and fitness websites
  • Warning labels and safety signs
  • Gaming UI and character design
  • Automotive and industrial themes
  • High-impact marketing campaigns

Suggested color roles

primary

Use #D32F2F as a strong, vibrant primary color for brand identity or key UI elements.

secondary

Employ #E64A19 for supporting information, secondary buttons, or to create visual flow.

accent

Apply #FFAB40 as a bright, attention-grabbing accent for calls-to-action or critical highlights.

background

Utilize #8C1C0C as a deep, grounding background to make the brighter colors pop and create depth.

text

White or a very light grey ensures excellent readability for text against the darker #D32F2F and #8C1C0C.

Accessibility notes

  • White text on #D32F2F and #8C1C0C provides optimal contrast and readability.
  • Avoid using #E64A19 or #FF7043 for small text on light backgrounds due to potentially low contrast.
  • Ensure sufficient contrast when pairing any two warm colors, especially for body text.
  • Reserve #FFAB40 for accents or large headings to ensure it stands out effectively.

Recommended combinations

Molten Stream

Ideal for main UI, strong branding, and creating a sense of dynamic movement and energy.

#D32F2F · #E64A19 · #8C1C0C

Fiery Glow

Perfect for alerts, interactive elements, or gradients that simulate intense heat and light.

#FF7043 · #FFAB40 · #E64A19

Volcanic Core

Creates powerful headers, dramatic backgrounds, or impactful visual storytelling elements.

#8C1C0C · #D32F2F · #FFAB40

CSS variables

:root {
  --lava-flow-1: #D32F2F;
  --lava-flow-2: #E64A19;
  --lava-flow-3: #FF7043;
  --lava-flow-4: #FFAB40;
  --lava-flow-5: #8C1C0C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lava-flow": {
        1: "#D32F2F",
        2: "#E64A19",
        3: "#FF7043",
        4: "#FFAB40",
        5: "#8C1C0C",
      }
    }
  }
}

Related searches

fiery red orange palettevolcanic color scheme designintense warm colors hexlava rock inspired paletteenergetic design colors

Palette colors

Hex values

Color 1#D32F2F
·
Color 2#E64A19
·
Color 3#FF7043
·
Color 4#FFAB40
·
Color 5#8C1C0C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.6:1Fail
1.8:1Fail
2
1.3:1Fail
1.4:1Fail
2.1:1Fail
2.3:1Fail
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
3.3:1AA18
4
2.6:1Fail
2.1:1Fail
1.5:1Fail
4.9:1AA
5
1.8:1Fail
2.3:1Fail
3.3:1AA18
4.9:1AA

Similar palettes

More like Lava Flow

View all warm
Ember Sky
Erupting Volcanic Heat
Magma Eruption Glow
Canyon Sunset Glow
Fiery Sunset Ember
Fiery Sunset Lagoon