Palette

Magma River Flow

Fiery reds and molten oranges capture the intense and powerful movement of a volcanic lava flow.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#331A1A#661A1A#B33000#E66000#FF9933

Palette guide

How to use Magma River Flow

Overview

The Magma River Flow palette vividly captures the intense and powerful movement of a volcanic lava flow, with fiery reds and molten oranges. This energetic scheme transitions from deep, earthy tones to brilliant, glowing highlights, creating a sense of dynamic motion and raw heat. Key colors include the grounding `#331A1A`, the strong `#B33000`, and the radiant `#FF9933`. It's an excellent choice for designs that need to convey adventure, energy, and a natural, untamed force. Designers can use it for compelling visual narratives, while developers will find it effective for creating engaging and high-impact user interfaces.

Best used for

Adventure travel branding and websites
Interactive maps with dynamic elements
Food packaging for spicy or bold products
Gaming UI for action-adventure genres
Animated explainer videos and motion graphics
Sports team logos and merchandise

Suggested color roles

primary

Utilize `#B33000` as the strong, flowing red-orange, ideal for primary branding, active states, or prominent calls-to-action.

secondary

Employ `#E66000` as a brighter, more active molten color, perfect for secondary elements that need to convey energy and movement.

accent

Apply `#FF9933` as the warmest, glowing highlight, excellent for interactive elements, small icons, or to simulate a radiant heat source.

background

Designate `#331A1A` as the deep, dark earth/ash background, providing a stable and contrasting base that enhances the fiery elements.

text

For optimal readability, use white or a very light grey on dark backgrounds like `#331A1A`. `#FF9933` can also serve as a striking text color on darker elements.

Accessibility notes

Ensure `#FF9933` and `#E66000` have sufficient contrast against `#331A1A` and `#661A1A` for text and interactive elements.
White or near-white text is crucial on `#331A1A` and `#661A1A` to meet WCAG AA standards.
The progression from dark to light offers flexibility, but always check contrast when overlaying text.
Avoid using `#661A1A` as text on `#331A1A` due to potential low contrast.

Recommended combinations

Lava Stream

Creates a dynamic flow from a dark base to vibrant molten reds, perfect for hero sections or animated transitions.

#331A1A · #B33000 · #E66000

Fiery Horizon

Ideal for highlighting energetic elements or creating gradients that suggest intense heat and light.

#661A1A · #E66000 · #FF9933

Deep Embers

Excellent for dark mode interfaces, using the deep reds for structure and the brighter red-orange for key interactive elements.

#331A1A · #661A1A · #B33000

CSS variables

:root {
  --magma-river-flow-1: #331A1A;
  --magma-river-flow-2: #661A1A;
  --magma-river-flow-3: #B33000;
  --magma-river-flow-4: #E66000;
  --magma-river-flow-5: #FF9933;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-river-flow": {
        1: "#331A1A",
        2: "#661A1A",
        3: "#B33000",
        4: "#E66000",
        5: "#FF9933",
      }
    }
  }
}

Hex values

Color 1#331A1A

Color 2#661A1A

Color 3#B33000

Color 4#E66000

Color 5#FF9933

Accessibility

Contrast checker

1.3:1Fail

2.6:1Fail

4.6:1AA

7.6:1AAA

1.3:1Fail

1.9:1Fail

3.5:1AA18

5.7:1AA

2.6:1Fail

1.9:1Fail

1.8:1Fail

3:1Fail

4.6:1AA

3.5:1AA18

1.8:1Fail

1.6:1Fail

7.6:1AAA

5.7:1AA

3:1Fail

1.6:1Fail

Similar palettes

More like Magma River Flow