Palette

Volcanic Caldera Ember

Intense, smoldering hues capture the raw power of a volcano, from dark rock to molten lava.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E2E2E#421800#6A2F0A#AA4F14#F7E6C3

Palette guide

How to use Volcanic Caldera Ember

Overview

The "Volcanic Caldera Ember" palette captures the intense, smoldering hues of a volcano, from dark rock to molten lava. This dynamic collection features a deep, grounding #2E2E2E, vibrant fiery oranges like #AA4F14 and #6A2F0A, and a striking, near-white #F7E6C3. The warm #421800 adds a deep, earthy brown. Designers can leverage this palette to create powerful, dramatic designs, energetic branding, or interfaces that demand attention and convey a sense of raw energy. It's particularly effective for projects related to adventure, nature, or any theme requiring a bold and memorable visual identity with a touch of warmth.

Best used for

Adventure and outdoor brands
Gaming interfaces and themes
Dynamic web hero sections
Event branding (e.g., festivals)
Food and beverage packaging (e.g., coffee, spices)
Sci-fi or fantasy art

Suggested color roles

primary

#2E2E2E - A deep, dark charcoal, ideal for main backgrounds, navigation, or strong headers, providing a powerful contrast.

secondary

#421800 - A rich, dark brown, suitable for secondary content areas, dividers, or subtle earthy accents.

accent

#AA4F14 - A vibrant, fiery orange, perfect for calls-to-action, interactive elements, or highlighting key information with intensity.

background

#2E2E2E - The darkest shade, creating a dramatic, immersive, and sophisticated backdrop for any design.

text

#F7E6C3 - For clear, readable text on dark backgrounds, ensuring excellent contrast, or a deep black like #2E2E2E for body text on light elements.

Accessibility notes

Ensure high contrast between accent color #AA4F14 and its background; it may need to be on a dark shade like #2E2E2E.
Text in #F7E6C3 on #2E2E2E or #421800 should pass WCAG AA/AAA for readability.
Avoid using #6A2F0A and #AA4F14 for small text elements if they are on a background of similar value.
Use the bright #F7E6C3 for critical text on dark backgrounds to maximize readability.

Recommended combinations

Fiery Drama

Creates a high-impact design with a dark base, vibrant accent, and clear, bright text.

#2E2E2E · #AA4F14 · #F7E6C3

Earthy Ember

Excellent for natural, warm sections, subtle highlights, and readable text.

#421800 · #6A2F0A · #F7E6C3

Caldera Core

Use for deep, moody backgrounds with layered, subtle warm tones for depth.

#2E2E2E · #6A2F0A · #421800

CSS variables

:root {
  --volcanic-caldera-ember-1: #2E2E2E;
  --volcanic-caldera-ember-2: #421800;
  --volcanic-caldera-ember-3: #6A2F0A;
  --volcanic-caldera-ember-4: #AA4F14;
  --volcanic-caldera-ember-5: #F7E6C3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-caldera-ember": {
        1: "#2E2E2E",
        2: "#421800",
        3: "#6A2F0A",
        4: "#AA4F14",
        5: "#F7E6C3",
      }
    }
  }
}

Hex values

Color 1#2E2E2E

Color 2#421800

Color 3#6A2F0A

Color 4#AA4F14

Color 5#F7E6C3

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

2.5:1Fail

11:1AAA

1.1:1Fail

1.5:1Fail

2.8:1Fail

12.5:1AAA

1.3:1Fail

1.5:1Fail

1.9:1Fail

8.4:1AAA

2.5:1Fail

2.8:1Fail

1.9:1Fail

4.4:1AA18

11:1AAA

12.5:1AAA

8.4:1AAA

4.4:1AA18

Similar palettes

More like Volcanic Caldera Ember

View all dark

Magma Flow Descent

Fiery Volcanic Ash

Obsidian Flow Texture

Basalt Ridge Shadow

Crater Lake Depth

Lava Flow Ember