Palette

Volcanic Rock Ember

A powerful palette of deep grays and fiery oranges, like cooling lava over volcanic rock.

darkdark5 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

#1F1F1F#3A3A3A#6C3D2F#B15E3F#F89B5F

Palette guide

How to use Volcanic Rock Ember

Overview

The "Volcanic Rock Ember" palette masterfully blends deep, brooding greys with vibrant, fiery oranges, capturing the essence of cooling lava over dark rock. This dramatic scheme ranges from the solid `#1F1F1F` and `#3A3A3A` to the intense `#6C3D2F`, glowing `#B15E3F`, and bright `#F89B5F`. It offers a powerful contrast, providing designers and developers with a dynamic visual language that combines dark sophistication with energetic warmth. This palette is perfect for projects needing an intense, impactful, and modern aesthetic reminiscent of smoldering embers.

Best used for

Gaming interfaces and fantasy narratives
Adventure and action-oriented branding
Dark mode applications requiring vibrancy
Dramatic presentations and digital art
Halloween or themed event promotions
High-contrast data visualizations

Suggested color roles

primary

Use `#3A3A3A` as a solid, dark base for main content areas, providing a sophisticated backdrop.

secondary

Apply `#B15E3F` as a main fiery element for calls to action, important headings, or interactive components.

accent

Utilize `#F89B5F` as the brightest ember, perfect for highlights, active states, or small but impactful details.

background

Employ `#1F1F1F` as a deep, immersive dark background, setting a dramatic and focused tone.

text

For excellent readability on dark backgrounds, use `#F89B5F` for vibrant text or a light grey like `#E0E0E0` for general body copy.

Accessibility notes

Ensure `#F89B5F` and `#B15E3F` have sufficient contrast against `#1F1F1F` and `#3A3A3A` backgrounds for legibility.
Avoid using `#6C3D2F` as text on `#3A3A3A` as their contrast may be insufficient for readability.
Always use a contrast checker for all text and interactive elements to ensure compliance with WCAG standards.
Lighter text, such as `#F89B5F` or white, will be most legible on the darker grey shades of this palette.

Recommended combinations

Lava Glow

Combines dark rock with bright, glowing lava for impactful visuals and calls to action.

#1F1F1F · #B15E3F · #F89B5F

Cooling Ember

Represents the transition from rock to cooling, darker ember, great for layered sections or progress indicators.

#3A3A3A · #6C3D2F · #B15E3F

Fiery Contrast

A stark dark background with a vivid, eye-catching accent, ideal for hero sections or key information.

#1F1F1F · #F89B5F · #3A3A3A

CSS variables

:root {
  --volcanic-rock-ember-2-1: #1F1F1F;
  --volcanic-rock-ember-2-2: #3A3A3A;
  --volcanic-rock-ember-2-3: #6C3D2F;
  --volcanic-rock-ember-2-4: #B15E3F;
  --volcanic-rock-ember-2-5: #F89B5F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-rock-ember-2": {
        1: "#1F1F1F",
        2: "#3A3A3A",
        3: "#6C3D2F",
        4: "#B15E3F",
        5: "#F89B5F",
      }
    }
  }
}

Hex values

Color 1#1F1F1F

Color 2#3A3A3A

Color 3#6C3D2F

Color 4#B15E3F

Color 5#F89B5F

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

3.6:1AA18

7.7:1AAA

1.4:1Fail

1.3:1Fail

2.5:1Fail

5.3:1AA

1.8:1Fail

1.3:1Fail

1.9:1Fail

4.2:1AA18

3.6:1AA18

2.5:1Fail

1.9:1Fail

2.2:1Fail

7.7:1AAA

5.3:1AA

4.2:1AA18

2.2:1Fail

Similar palettes

More like Volcanic Rock Ember