Back to palettes

Palette

Fiery Volcanic Veins

Intense reds and deep browns depict the glowing veins of molten lava within dark volcanic rock.

darkdark5 colors
More dark 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

#3B1B1C#5E2F30#824243#B05F5F#DC8B8B

Palette guide

How to use Fiery Volcanic Veins

Overview

The Fiery Volcanic Veins palette evokes the intense glow of molten lava within dark rock, offering a gradient of deep, smoldering reds. Starting with the profound dark red #3B1B1C, it transitions through richer tones like #5E2F30 and #824243, culminating in the brighter, more vibrant #B05F5F and #DC8B8B. This monochromatic-leaning scheme provides a powerful, dramatic, and warm atmosphere. It's excellent for designs needing depth, passion, and a sense of raw, underlying energy, perfect for conveying strength and a captivating visual flow.

Best used for

  • Dramatic website themes or landing pages
  • Branding for luxury goods with a bold edge
  • Theatrical production designs or movie titles
  • Art installations or digital art backgrounds
  • UI elements for high-impact alerts or warnings
  • Fashion or apparel lines emphasizing warmth and intensity

Suggested color roles

primary

#3B1B1C (The dominant dark base, providing a rich, deep foundation for overall design.)

secondary

#5E2F30 (Used for contrasting sections, sub-headers, or subtle depth in backgrounds.)

accent

#B05F5F (Highlighting interactive elements or key information, drawing attention with its warmer tone.)

background

#3B1B1C (Creates an immersive, dramatic backdrop, especially effective for sophisticated dark modes.)

text

#DC8B8B (Suitable for headings or significant text on darker backgrounds. For body text, ensure sufficient contrast or use a near-white.)

Accessibility notes

  • The lighter reds like #DC8B8B may lack sufficient contrast against mid-tones such as #824243 for small text.
  • Ensure text on #3B1B1C, #5E2F30, or #824243 uses a very light color like #DC8B8B or white for readability.
  • Avoid using #3B1B1C or #5E2F30 for text on any of the lighter palette colors due to poor contrast.
  • For color-blind users, differentiate interactive elements not solely by color but also by iconography or underline.

Recommended combinations

Molten Depths

Ideal for a striking hero section, showing depth and a fiery inner glow.

#3B1B1C · #824243 · #DC8B8B

Ember Glow

Great for call-to-action buttons or highlighted information, providing warm visibility.

#5E2F30 · #B05F5F · #DC8B8B

Vein Texture

Perfect for subtle background gradients or layered UI elements, adding depth and richness.

#3B1B1C · #5E2F30 · #824243

CSS variables

:root {
  --fiery-volcanic-veins-2-1: #3B1B1C;
  --fiery-volcanic-veins-2-2: #5E2F30;
  --fiery-volcanic-veins-2-3: #824243;
  --fiery-volcanic-veins-2-4: #B05F5F;
  --fiery-volcanic-veins-2-5: #DC8B8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-volcanic-veins-2": {
        1: "#3B1B1C",
        2: "#5E2F30",
        3: "#824243",
        4: "#B05F5F",
        5: "#DC8B8B",
      }
    }
  }
}

Related searches

deep red color schemelava flow colorsmonochromatic red palettedark dramatic red huesvolcanic rock colors

Palette colors

Hex values

Color 1#3B1B1C
·
Color 2#5E2F30
·
Color 3#824243
·
Color 4#B05F5F
·
Color 5#DC8B8B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.4:1AA18
6:1AA
2
1.4:1Fail
1.5:1Fail
2.4:1Fail
4.2:1AA18
3
2.1:1Fail
1.5:1Fail
1.7:1Fail
2.9:1Fail
4
3.4:1AA18
2.4:1Fail
1.7:1Fail
1.7:1Fail
5
6:1AA
4.2:1AA18
2.9:1Fail
1.7:1Fail

Similar palettes

More like Fiery Volcanic Veins

View all dark