Back to palettes

Palette

Magma Flow Descent

A powerful palette depicting the intense heat and dramatic movement of molten rock and cooled ash.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Magma Flow Descent 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 Magma Flow Descent.

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

Data visualization

#8b0000#ff4500#ff8c00#2f2f2f#696969

Palette guide

How to use Magma Flow Descent

Overview

The Magma Flow Descent palette captures the intense, dramatic movement of molten rock and cooled ash with a dark, powerful aesthetic. This scheme is ideal for projects requiring a sense of raw power and grounded intensity. Key colors include the deep, smoldering red `#8b0000`, the active, fiery orange `#ff4500`, and the stable, dark grey of `#2f2f2f`. Designers can leverage its vibrant contrasts for impactful visual storytelling, while developers will appreciate the clear differentiation for UI elements in dark mode applications. It evokes volcanic landscapes, blending heat with solid earth.

Best used for

  • Gaming UI for action or fantasy genres
  • Dramatic branding for high-energy products
  • Sci-fi themed digital interfaces
  • Heavy metal or rock album art
  • Industrial design concepts and visualizations
  • Warning systems or emergency alerts

Suggested color roles

primary

Use `#8b0000` as the foundational deep red, perfect for main headings or large sections that need to convey intensity and depth.

secondary

Employ `#ff4500` for active states, call-to-action buttons, or elements requiring a vibrant, energetic highlight.

accent

Apply `#ff8c00` sparingly for glowing effects, small icons, or to draw attention to critical information with a bright, fiery touch.

background

Utilize `#2f2f2f` as a dark, stable background, mimicking cooled volcanic ash or deep earth, providing excellent contrast for brighter elements.

text

Pair with `#696969` for subtle secondary text, or use white/light grey for primary text on dark backgrounds like `#2f2f2f` to ensure readability.

Accessibility notes

  • Ensure `#ff4500` and `#ff8c00` have sufficient contrast against `#2f2f2f` and `#696969` for text and interactive elements.
  • Use white or very light grey text on `#8b0000` and `#2f2f2f` to meet WCAG AA standards for readability.
  • Avoid using `#696969` as primary text on `#2f2f2f` due to potential low contrast.
  • The fiery reds and oranges should be distinct enough from each other for users with color vision deficiencies.

Recommended combinations

Fiery Core

Ideal for hero sections where the deep red provides a strong base, accented by the active orange against a dark background.

#8B0000 · #FF4500 · #2F2F2F

Molten Edge

Excellent for highlighting progress bars or dynamic elements, showing a vibrant glow against a muted grey.

#FF4500 · #FF8C00 · #696969

Deep Earth

Perfect for dark mode interfaces, using the greys for structure and the deep red for essential branding or warnings.

#2F2F2F · #696969 · #8B0000

CSS variables

:root {
  --magma-flow-descent-1: #8b0000;
  --magma-flow-descent-2: #ff4500;
  --magma-flow-descent-3: #ff8c00;
  --magma-flow-descent-4: #2f2f2f;
  --magma-flow-descent-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-flow-descent": {
        1: "#8b0000",
        2: "#ff4500",
        3: "#ff8c00",
        4: "#2f2f2f",
        5: "#696969",
      }
    }
  }
}

Related searches

volcanic color schemesfiery dark paletteintense red orange greymagma themed ui colorsearth lava color combination

Palette colors

Hex values

Color 1#8b0000
·
Color 2#ff4500
·
Color 3#ff8c00
·
Color 4#2f2f2f
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
4.3:1AA18
1.3:1Fail
1.8:1Fail
2
2.9:1Fail
1.5:1Fail
3.9:1AA18
1.6:1Fail
3
4.3:1AA18
1.5:1Fail
5.7:1AA
2.4:1Fail
4
1.3:1Fail
3.9:1AA18
5.7:1AA
2.4:1Fail
5
1.8:1Fail
1.6:1Fail
2.4:1Fail
2.4:1Fail

Similar palettes

More like Magma Flow Descent

View all dark
Volcanic Caldera Ember
Fiery Volcanic Ash
Obsidian Flow Texture
Basalt Ridge Shadow
Crater Lake Depth
Lava Flow Ember