Back to palettes

Palette

Volcanic Flame Flow

Intense reds and oranges, capturing the fiery passion and dynamic movement of a burning flame.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#B22222#DC143C#FF4500#FF6347

Palette guide

How to use Volcanic Flame Flow

Overview

The Volcanic Flame Flow palette is a vibrant and intense collection of reds and oranges, perfectly capturing the dynamic movement and fiery passion of a burning flame. From the deep, rich #8B0000 to the bright, energetic #FF6347, this palette offers a powerful gradient for impactful designs. Developers can utilize the distinct warmth of #FF4500 for interactive elements, while designers will find the intense progression from #B22222 to #DC143C ideal for creating visually stimulating interfaces and compelling brand identities that demand attention.

Best used for

  • High-energy brand logos
  • Sports team uniforms and merchandise
  • Emergency services branding
  • Food packaging for spicy products
  • Gaming platform UI/UX
  • Dramatic event invitations

Suggested color roles

primary

#8B0000 - A deep, commanding red, excellent for main headings, backgrounds, or foundational brand elements.

secondary

#B22222 - A slightly brighter red, suitable for subheadings, navigation, or secondary graphic elements.

accent

#FF6347 - The brightest, most vibrant orange-red, perfect for calls-to-action, alerts, or key interactive components.

background

#8B0000 - Provides a rich, dark red backdrop; consider pairing with near-white text for readability.

text

#FF4500 - Use for prominent titles or graphic text on very dark backgrounds; for body text, use white or a light grey.

Accessibility notes

  • Ensure a high contrast ratio when using #FF6347 or #FF4500 for text against the darkest reds like #8B0000.
  • Avoid using adjacent reds like #8B0000 and #B22222 for text/background pairings due to low contrast.
  • Primary body text should ideally be white or a very light neutral color on these dark, intense reds.
  • Check for readability across various screen types and lighting conditions.

Recommended combinations

Flame Core

Creates a powerful, deep gradient for backgrounds or layered design elements.

#8B0000 · #B22222 · #DC143C

Burning Highlight

Ideal for striking calls-to-action, active states, or urgent notifications.

#8B0000 · #FF6347 · #FF4500

Dynamic Flow

Excellent for progress bars, infographics, or sections needing a lively, energetic transition.

#B22222 · #FF4500 · #FF6347

CSS variables

:root {
  --volcanic-flame-flow-1: #8B0000;
  --volcanic-flame-flow-2: #B22222;
  --volcanic-flame-flow-3: #DC143C;
  --volcanic-flame-flow-4: #FF4500;
  --volcanic-flame-flow-5: #FF6347;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-flame-flow": {
        1: "#8B0000",
        2: "#B22222",
        3: "#DC143C",
        4: "#FF4500",
        5: "#FF6347",
      }
    }
  }
}

Related searches

vibrant red color palettefire flame colorsbold energetic designdramatic red orangepassionate color scheme

Palette colors

Hex values

Color 1#8B0000
·
Color 2#B22222
·
Color 3#DC143C
·
Color 4#FF4500
·
Color 5#FF6347
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.9:1Fail
3.4:1AA18
2
1.5:1Fail
1.3:1Fail
1.9:1Fail
2.3:1Fail
3
2:1Fail
1.3:1Fail
1.5:1Fail
1.7:1Fail
4
2.9:1Fail
1.9:1Fail
1.5:1Fail
1.2:1Fail
5
3.4:1AA18
2.3:1Fail
1.7:1Fail
1.2:1Fail

Similar palettes

More like Volcanic Flame Flow

View all vibrant