Palette

Volcanic Flow Ember

A powerful and dramatic gradient capturing the intense heat and raw power of flowing molten lava.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A0D0F#421808#8D2A00#CD4A0B#FF8E41

Palette guide

How to use Volcanic Flow Ember

Overview

The Volcanic Flow Ember palette is a powerful and dramatic gradient, perfectly capturing the intense heat and raw power of flowing molten lava. Beginning with a deep, nearly black #1A0D0F, it transitions through rich, earthy browns like #421808 to vibrant, glowing oranges such as #8D2A00, #CD4A0B, and the bright #FF8E41. This palette provides excellent depth for immersive designs. Designers can use the darker hues for foundational elements, while developers can leverage the brighter oranges for calls-to-action and interactive states, creating a truly energetic user experience.

Best used for

Adventure tourism websites
High-end rugged product branding
Video game environment design
Dark mode UI themes
Museum exhibits on geology
Outdoor gear marketing

Suggested color roles

primary

#1A0D0F - A very dark, deep brown-black, ideal for main backgrounds, headers, or foundational UI elements.

secondary

#421808 - A rich, dark brown, excellent for sub-sections, borders, or subtle background variations.

accent

#FF8E41 - The brightest orange, perfect for calls-to-action, highlights, or critical notifications that demand immediate attention.

background

#1A0D0F - Provides a deep, immersive canvas, making the brighter oranges glow intensely.

text

#CD4A0B - Suitable for larger headings or graphical text on the darkest backgrounds; for body text, use white or a very light cream.

Accessibility notes

Ensure #FF8E41 or #CD4A0B text has sufficient contrast against #1A0D0F or #421808 backgrounds.
Avoid using #1A0D0F and #421808 for text/background pairings due to extremely low contrast.
Always default to white or a very light neutral color for primary body text on the darker hues.
Test text legibility on all color combinations, especially for smaller font sizes.

Recommended combinations

Deep Lava

Creates a rich, dark gradient for backgrounds or subtle depth in UI elements.

#1A0D0F · #421808 · #8D2A00

Molten Highlight

Ideal for high-impact calls-to-action or critical alerts against a dark, powerful base.

#1A0D0F · #FF8E41 · #CD4A0B

Flowing Heat

Excellent for progress indicators, infographics, or animated transitions showing increasing intensity.

#421808 · #CD4A0B · #FF8E41

CSS variables

:root {
  --volcanic-flow-ember-1: #1A0D0F;
  --volcanic-flow-ember-2: #421808;
  --volcanic-flow-ember-3: #8D2A00;
  --volcanic-flow-ember-4: #CD4A0B;
  --volcanic-flow-ember-5: #FF8E41;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-flow-ember": {
        1: "#1A0D0F",
        2: "#421808",
        3: "#8D2A00",
        4: "#CD4A0B",
        5: "#FF8E41",
      }
    }
  }
}

Hex values

Color 1#1A0D0F

Color 2#421808

Color 3#8D2A00

Color 4#CD4A0B

Color 5#FF8E41

Accessibility

Contrast checker

1.2:1Fail

2.2:1Fail

4.1:1AA18

8.3:1AAA

1.2:1Fail

1.8:1Fail

3.4:1AA18

6.7:1AA

2.2:1Fail

1.8:1Fail

1.9:1Fail

3.7:1AA18

4.1:1AA18

3.4:1AA18

1.9:1Fail

2:1Fail

8.3:1AAA

6.7:1AA

3.7:1AA18

2:1Fail

Similar palettes

More like Volcanic Flow Ember