Palette

Fiery Volcanic Veins

Dramatic blend of deep reds and burning oranges, mirroring molten rock and volcanic activity.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Volcanic Veins 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 Volcanic Veins.

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

Data visualization

#8B0000#B22222#CD5C5C#FF6347#FFD700

Palette guide

How to use Fiery Volcanic Veins

Overview

The Fiery Volcanic Veins palette offers a dramatic blend of deep reds and burning oranges, mirroring molten rock and volcanic activity. It begins with the profound #8B0000 (DarkRed), moving through the intense #B22222 (FireBrick) and warmer #CD5C5C (IndianRed). The palette ignites further with the vibrant #FF6347 (Tomato) and culminates in the luminous #FFD700 (Gold), evoking superheated minerals. This scheme is energetic, warm, and highly expressive, making it perfect for designs that need to convey passion, intensity, and a powerful, inviting glow, creating a memorable visual impact.

Best used for

Restaurant branding specializing in spicy cuisine
Fashion collections with warm, bold aesthetics
Event invitations for lively celebrations
Digital art or illustration with fiery themes
Warm-toned website banners or advertisements
Packaging design for artisanal hot sauces or gourmet foods

Suggested color roles

primary

#8B0000 (A deep, grounding red for dominant sections, providing a sense of luxury and intensity.)

secondary

#B22222 (Used for sub-headers, borders, or backgrounds that require a slightly lighter, yet still strong, presence.)

accent

#FF6347 (Ideal for calls to action, interactive elements, or key highlights, ensuring high visibility.)

background

#8B0000 (Creates a rich, warm, and immersive backdrop, enhancing the fiery mood.)

text

#FFD700 (Excellent for headings and important text on darker backgrounds. For body text, a light cream or white provides good contrast.)

Accessibility notes

Ensure #FFD700 and #FF6347 have sufficient contrast against #8B0000, #B22222, and #CD5C5C for text.
Avoid using #CD5C5C for small text on #B22222 due to potential low contrast.
For body text, a light cream or white will provide better readability than any palette color on the darker reds.
Consider providing sufficient spacing and line height when using vibrant colors for extensive text to reduce eye strain.

Recommended combinations

Molten Core

Ideal for impactful headlines or feature sections, conveying energy and luxury.

#8B0000 · #FF6347 · #FFD700

Ember Glow

Suitable for progress bars or status indicators, showing progression through warm tones.

#B22222 · #CD5C5C · #FF6347

Golden Veins

Excellent for layered backgrounds or subtle branding elements, adding depth with a metallic accent.

#8B0000 · #B22222 · #FFD700

CSS variables

:root {
  --fiery-volcanic-veins-1: #8B0000;
  --fiery-volcanic-veins-2: #B22222;
  --fiery-volcanic-veins-3: #CD5C5C;
  --fiery-volcanic-veins-4: #FF6347;
  --fiery-volcanic-veins-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-volcanic-veins": {
        1: "#8B0000",
        2: "#B22222",
        3: "#CD5C5C",
        4: "#FF6347",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#B22222

Color 3#CD5C5C

Color 4#FF6347

Color 5#FFD700

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

3.4:1AA18

7.1:1AAA

1.5:1Fail

1.7:1Fail

2.3:1Fail

4.8:1AA

2.5:1Fail

1.7:1Fail

1.3:1Fail

2.8:1Fail

3.4:1AA18

2.3:1Fail

1.3:1Fail

2.1:1Fail

7.1:1AAA

4.8:1AA

2.8:1Fail

2.1:1Fail

Similar palettes

More like Fiery Volcanic Veins

Erupting Volcanic Heat