Palette

Volcanic Earth

Raw and intense colors drawing inspiration from the powerful, fiery heart of volcanic landscapes.

earthenergetic5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#2F4F4F#708090#FF4500#8B4513

Palette guide

How to use Volcanic Earth

Overview

The "Volcanic Earth" palette is a raw and intense collection, drawing inspiration from the powerful, fiery heart of volcanic landscapes. It combines deep, powerful reds like #8B0000 (Dark Red) and vibrant #FF4500 (Orange Red) with grounding earth tones such as #2F4F4F (Dark Slate Gray) and #8B4513 (Saddle Brown). This palette is excellent for designs that need to convey strength, energy, and a connection to primal forces. Designers can use it for impactful branding, while developers will find it versatile for creating dynamic and earthy interfaces.

Best used for

Outdoor adventure brands
Rugged product marketing
Dynamic editorial design
Gaming UI for action-packed themes
Environmental awareness campaigns
Artisan or craft-focused businesses

Suggested color roles

primary

#8B0000 - A rich, deep red for strong headers, primary calls to action, or dominant brand elements, symbolizing power.

secondary

#2F4F4F - A dark slate grey for main content backgrounds or structural elements, providing a cool, stable counterpoint.

accent

#FF4500 - A bright, energetic orange-red for critical highlights, interactive states, or urgent notifications, grabbing attention.

background

#2F4F4F - Offers a sophisticated dark grey background, allowing the warm reds and browns to stand out.

text

#708090 or a very light grey/white for primary text on dark backgrounds to ensure readability.

Accessibility notes

Ensure #FF4500 and #8B0000 have sufficient contrast against #2F4F4F for text and interactive elements.
#708090 might have limited contrast on #2F4F4F; use with care for small text.
Use a light text color (e.g., white or near-white) for body text over #8B0000 or #2F4F4F.
Always check WCAG guidelines for color combinations to ensure broad accessibility.

Recommended combinations

Fiery Ground

Creates a strong contrast, ideal for highlighting key information against a stable, dark base.

#2F4F4F · #FF4500 · #8B0000

Earthy Ember

Blends warm earth tones with a vibrant accent, suitable for graphics or secondary content blocks.

#8B4513 · #708090 · #FF4500

Deep Volcano

A robust combination for dark-themed sections, offering depth and a subtle transition of tones.

#8B0000 · #2F4F4F · #708090

CSS variables

:root {
  --volcanic-earth-1: #8B0000;
  --volcanic-earth-2: #2F4F4F;
  --volcanic-earth-3: #708090;
  --volcanic-earth-4: #FF4500;
  --volcanic-earth-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-earth": {
        1: "#8B0000",
        2: "#2F4F4F",
        3: "#708090",
        4: "#FF4500",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#2F4F4F

Color 3#708090

Color 4#FF4500

Color 5#8B4513

Accessibility

Contrast checker

1.1:1Fail

2.5:1Fail

2.9:1Fail

1.4:1Fail

1.1:1Fail

2.2:1Fail

2.6:1Fail

1.3:1Fail

2.5:1Fail

2.2:1Fail

1.2:1Fail

1.8:1Fail

2.9:1Fail

2.6:1Fail

1.2:1Fail

2.1:1Fail

1.4:1Fail

1.3:1Fail

1.8:1Fail

2.1:1Fail

Similar palettes

More like Volcanic Earth

Bohemian Spice Market

Sunbaked Terra Firm

Fiery Volcanic Veins