Palette

Molten Volcanic Clay

Deep, smoldering reds that evoke the raw power and heat of molten earth and volcanic flows.

WarmDark5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F1D1D#7E2A2A#AF3737#DF4444#FF5C5C

Palette guide

How to use Molten Volcanic Clay

Overview

The Molten Volcanic Clay palette delivers a powerful and intense gradient of deep, smoldering reds to vibrant, fiery reds, evoking the raw power and heat of molten earth. Ranging from the profound #4F1D1D to the brilliant #FF5C5C, this collection offers a dynamic and impactful spectrum. Designers can leverage these hues, including the strong #7E2A2A and the assertive #AF3737, to create visuals that are both dramatic and energetic. Developers will find this palette excellent for crafting high-impact interfaces, bold branding, or immersive digital experiences that demand attention and convey a sense of raw force. Its cohesive red progression ensures visual consistency and strong emotional resonance.

Best used for

High-impact marketing and advertising campaigns
Sports team branding and merchandise
Automotive design and performance branding
Warning signs and critical alerts in UI/UX
Dramatic digital art and visual effects
Brand identity for energetic and powerful products

Suggested color roles

primary

Utilize #AF3737 as a strong, balanced primary red for key headings, calls to action, or prominent graphical elements.

secondary

Employ #DF4444 for secondary emphasis or interactive elements, providing a vibrant and energetic highlight.

accent

Apply #FF5C5C for bright highlights, glowing effects, or small, impactful details that require maximum intensity.

background

Consider #4F1D1D for a deep, grounding background that exudes sophistication and raw power, or a dark neutral.

text

White or a very light grey provides optimal contrast for text on darker shades like #4F1D1D and #7E2A2A. For lighter backgrounds, use a dark charcoal or black.

Accessibility notes

Light text (white or very light grey) is critical for readability on all darker reds within this palette.
Avoid using adjacent reds for text and background, as contrast may be insufficient for accessibility.
Ensure interactive elements using #FF5C5C have a clear visual focus state, as its brightness is intense.
Always check WCAG contrast ratios for all text and UI components to ensure an inclusive user experience.

Recommended combinations

Deep Ember

Creates a profound sense of depth, ideal for backgrounds, footers, or subtle gradients in dark, powerful themes.

#4F1D1D · #7E2A2A · #AF3737

Fiery Burst

Excellent for illustrating intense light, energy, or dynamic graphics, with a clear progression from rich to vibrant red.

#AF3737 · #DF4444 · #FF5C5C

Bold Contrast

Combines the darkest red with the two brightest for maximum impact and clear visual separation in UI elements or alerts.

#4F1D1D · #DF4444 · #FF5C5C

CSS variables

:root {
  --molten-volcanic-clay-1: #4F1D1D;
  --molten-volcanic-clay-2: #7E2A2A;
  --molten-volcanic-clay-3: #AF3737;
  --molten-volcanic-clay-4: #DF4444;
  --molten-volcanic-clay-5: #FF5C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-volcanic-clay": {
        1: "#4F1D1D",
        2: "#7E2A2A",
        3: "#AF3737",
        4: "#DF4444",
        5: "#FF5C5C",
      }
    }
  }
}

Hex values

Color 1#4F1D1D

Color 2#7E2A2A

Color 3#AF3737

Color 4#DF4444

Color 5#FF5C5C

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

3.3:1AA18

4.5:1AA

1.5:1Fail

2.2:1Fail

3.1:1AA18

2.2:1Fail

1.5:1Fail

2:1Fail

3.3:1AA18

2.2:1Fail

1.5:1Fail

1.4:1Fail

4.5:1AA

3.1:1AA18

2:1Fail

1.4:1Fail

Similar palettes

More like Molten Volcanic Clay

Molten Volcanic Clay

See it in context.

Ready when you are.

Built with Molten Volcanic Clay.

How to use Molten Volcanic Clay

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Ember

Fiery Burst

Bold Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Molten Volcanic Clay