Back to palettes

Palette

Volcanic Rock Ember

Fiery reds and deep charcoals mirroring the intense heat and raw power of cooling volcanic rock.

darkenergetic5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A0301#5D0502#8A0703#BD0A05#F00C06

Palette guide

How to use Volcanic Rock Ember

Overview

The "Volcanic Rock Ember" palette is an intense gradient of fiery reds, evoking the raw power of magma and cooling volcanic rock. Ranging from the deep, almost black `#3A0301` to the vivid, urgent `#F00C06`, this scheme offers a dramatic and energetic spectrum. It's ideal for designs requiring a bold, passionate, or urgent feel, as it masterfully balances dark intensity with striking, vibrant warmth. Designers and developers can leverage its powerful contrasts to convey energy, urgency, and a commanding visual presence.

Best used for

  • Emergency services and warning systems
  • Sports teams and high-energy branding
  • Action-oriented marketing campaigns
  • Dramatic film titles and game interfaces
  • Automotive and performance product designs
  • Alerts and critical notifications

Suggested color roles

primary

Use `#BD0A05` as the dominant fiery element for impactful statements, main buttons, or critical information.

secondary

Apply `#8A0703` as a supportive red for secondary headings or elements requiring deeper warmth without losing intensity.

accent

Utilize `#F00C06` as the brightest, most urgent highlight for calls to action, active states, or small but vital details.

background

Employ `#3A0301` as a deep, powerful, almost black base, providing a dramatic backdrop for the vibrant reds.

text

For excellent visibility on dark backgrounds, use `#F00C06` for vibrant text or a crisp white for general body copy and headings.

Accessibility notes

  • Text in `#F00C06` or `#BD0A05` will provide excellent contrast against `#3A0301` or `#5D0502` backgrounds.
  • Avoid using mid-range reds like `#8A0703` as text on adjacent shades (e.g., `#5D0502`) due to potential low contrast.
  • For critical information, consider using pure white text on the darkest reds for maximum readability and WCAG compliance.
  • Always check contrast ratios, especially when using reds on reds, to ensure all text and UI elements are accessible.

Recommended combinations

Magma Flow

Creates a sense of deep base with vivid, flowing magma, ideal for hero sections or dynamic elements.

#3A0301 · #BD0A05 · #F00C06

Intense Heat

A gradient of increasing warmth and intensity, useful for progress bars or heat maps.

#5D0502 · #8A0703 · #F00C06

Dark Ember

Strong dark ground with bright, glowing highlights, perfect for impactful accents and calls to action.

#3A0301 · #F00C06 · #BD0A05

CSS variables

:root {
  --volcanic-rock-ember-1: #3A0301;
  --volcanic-rock-ember-2: #5D0502;
  --volcanic-rock-ember-3: #8A0703;
  --volcanic-rock-ember-4: #BD0A05;
  --volcanic-rock-ember-5: #F00C06;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-ember": {
        1: "#3A0301",
        2: "#5D0502",
        3: "#8A0703",
        4: "#BD0A05",
        5: "#F00C06",
      }
    }
  }
}

Related searches

fiery red palettedark red color schememagma colorspowerful red designintense energetic colors

Palette colors

Hex values

Color 1#3A0301
·
Color 2#5D0502
·
Color 3#8A0703
·
Color 4#BD0A05
·
Color 5#F00C06
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.8:1Fail
2.7:1Fail
4:1AA18
2
1.2:1Fail
1.4:1Fail
2.2:1Fail
3.2:1AA18
3
1.8:1Fail
1.4:1Fail
1.5:1Fail
2.3:1Fail
4
2.7:1Fail
2.2:1Fail
1.5:1Fail
1.5:1Fail
5
4:1AA18
3.2:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Rock Ember

View all dark
Molten Rock
Carnival Midnight Sky
Cyberpunk Cityscape
Cyberpunk Metropolis
Digital Synthwave Haze
Dragon Scales Shimmer