Palette

Lava Flow Ember

Captures the stark, dark beauty of solidified lava flows with subtle hints of lingering, deep ember warmth.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E2E2E#4A4A4A#6C6C6C#902F1C#181818

Palette guide

How to use Lava Flow Ember

Overview

The Lava Flow Ember palette captures the stark, dark beauty of solidified lava flows with subtle hints of lingering, deep ember warmth. This powerful collection, featuring profound greys like #181818 and #2E2E2E, punctuated by the fiery #902F1C, is perfect for designers and developers aiming to create an intense and dramatic aesthetic. It offers a rugged, industrial feel with an unexpected glow, providing versatility for projects that demand a strong visual impact. This palette is excellent for applications requiring a dark, sophisticated, and energetic mood.

Best used for

Gaming interfaces and branding
Industrial and automotive design
Dark mode web and app themes
Heavy metal or rock music album art
Impactful portfolio websites
Action-oriented content platforms

Suggested color roles

primary

Use #181818 as the dominant background or foundational color, providing ultimate depth and contrast.

secondary

Apply #2E2E2E for main content areas, providing a slightly lighter but still dark base.

accent

Deploy #902F1C sparingly for critical alerts, call-to-action buttons, or striking highlights to create a focal point.

background

Employ #181818 for a dramatic, immersive background, setting a powerful and modern tone.

text

For text, #6C6C6C provides subtle readability, while white or light grey offers maximum contrast against the dark background colors.

Accessibility notes

Ensure #902F1C has sufficient contrast against its background; it works best as an accent or for larger text.
White or very light grey text is recommended for body copy on #181818 and #2E2E2E for optimal readability.
Avoid using #4A4A4A on #2E2E2E for small text due to potentially low contrast.
The lighter grey #6C6C6C can be used for secondary information or metadata on darker backgrounds.

Recommended combinations

Ash & Ember

Ideal for primary UI, strong branding, and elements that need to convey power and urgency.

#181818 · #2E2E2E · #902F1C

Solidified Rock

Perfect for subtle layering, secondary content blocks, or background textures that mimic volcanic rock.

#4A4A4A · #6C6C6C · #2E2E2E

Dark Core

Creates a dynamic and intense visual for headers, hero sections, or impactful advertisements.

#181818 · #4A4A4A · #902F1C

CSS variables

:root {
  --lava-flow-ember-1: #2E2E2E;
  --lava-flow-ember-2: #4A4A4A;
  --lava-flow-ember-3: #6C6C6C;
  --lava-flow-ember-4: #902F1C;
  --lava-flow-ember-5: #181818;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lava-flow-ember": {
        1: "#2E2E2E",
        2: "#4A4A4A",
        3: "#6C6C6C",
        4: "#902F1C",
        5: "#181818",
      }
    }
  }
}

Hex values

Color 1#2E2E2E

Color 2#4A4A4A

Color 3#6C6C6C

Color 4#902F1C

Color 5#181818

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

1.7:1Fail

1.3:1Fail

1.5:1Fail

1.7:1Fail

1.1:1Fail

2:1Fail

2.6:1Fail

1.7:1Fail

1.5:1Fail

3.4:1AA18

1.7:1Fail

1.1:1Fail

1.5:1Fail

2.2:1Fail

1.3:1Fail

2:1Fail

3.4:1AA18

2.2:1Fail

Similar palettes

More like Lava Flow Ember

Lava Flow Ember

See it in context.

Ready when you are.

Built with Lava Flow Ember.

How to use Lava Flow Ember

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ash & Ember

Solidified Rock

Dark Core

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lava Flow Ember