Palette

Fiery Volcanic Veins

Intense reds and oranges combined with deep black, portraying the powerful, molten core of a volcano.

VibrantEnergetic5 colors

More Vibrant 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

#FF4500#DC143C#B22222#000000#FFD700

Palette guide

How to use Fiery Volcanic Veins

Overview

The Fiery Volcanic Veins palette explodes with the intense, molten core of a volcano, combining searing reds and oranges with profound black. It features the vibrant #FF4500 (OrangeRed), a striking #DC143C (Crimson), and a powerful #B22222 (FireBrick), all grounded by absolute #000000. A surprising splash of #FFD700 (Gold) adds a metallic, incandescent shimmer, mimicking superheated minerals. This palette delivers high energy, drama, and a sense of raw power, perfect for designs that need to be bold, attention-grabbing, and convey an energetic, impactful presence.

Best used for

High-energy sports or e-sports branding
Alerts and warning systems in industrial interfaces
Event promotions for festivals or concerts
Website headers demanding immediate attention
Gaming UI for action-packed genres
Automotive or performance product marketing

Suggested color roles

primary

#000000 (The dominant background, providing stark contrast and grounding the vibrant hues.)

secondary

#B22222 (Used for secondary sections, large text, or graphical elements that need to stand out from black.)

accent

#FF4500 (Ideal for calls to action, interactive elements, or critical highlights due to its high visibility.)

background

#000000 (Creates a powerful, dramatic backdrop, making the fiery reds and oranges truly pop.)

text

#FFD700 (Excellent for headings and key information on black. For body text, #FF4500 or white provides good contrast.)

Accessibility notes

Ensure #FF4500, #DC143C, #B22222, and #FFD700 have sufficient contrast against #000000 for all text sizes.
Avoid using red-on-red (e.g., #B22222 on #DC143C) for text due to potential readability issues for color-blind users and low contrast.
The vibrancy of #FF4500 and #FFD700 can cause eye strain if used excessively for long-form text.
Provide alternative cues for status or interactive elements beyond color alone, especially for #DC143C and #B22222.

Recommended combinations

Lava Core

Perfect for a dynamic hero banner or warning messages, showcasing intense energy.

#000000 · #FF4500 · #DC143C

Golden Ember

Excellent for badges, awards, or important notifications, combining warmth with a touch of luxury.

#B22222 · #FFD700 · #000000

Deep Ignition

Suitable for bold typography or interactive button states, creating a powerful visual hierarchy.

#000000 · #B22222 · #FF4500

CSS variables

:root {
  --fiery-volcanic-veins-3-1: #FF4500;
  --fiery-volcanic-veins-3-2: #DC143C;
  --fiery-volcanic-veins-3-3: #B22222;
  --fiery-volcanic-veins-3-4: #000000;
  --fiery-volcanic-veins-3-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-volcanic-veins-3": {
        1: "#FF4500",
        2: "#DC143C",
        3: "#B22222",
        4: "#000000",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#DC143C

Color 3#B22222

Color 4#000000

Color 5#FFD700

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

6.1:1AA

2.5:1Fail

1.5:1Fail

1.3:1Fail

4.2:1AA18

3.6:1AA18

1.9:1Fail

1.3:1Fail

3.1:1AA18

4.8:1AA

6.1:1AA

4.2:1AA18

3.1:1AA18

15:1AAA

2.5:1Fail

3.6:1AA18

4.8:1AA

15:1AAA

Similar palettes

More like Fiery Volcanic Veins

View all Vibrant

Aurora Blossom Dreams

Mediterranean Tile Warmth