Palette

Magma Flow Horizon

A dramatic palette inspired by the molten heart of a volcano meeting the twilight sky.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#361B1C#5D2B2C#8F3A3A#C24E4E#FF7B7B

Palette guide

How to use Magma Flow Horizon

Overview

The Magma Flow Horizon palette offers a dramatic gradient of molten reds, evoking the intense heart of a volcano meeting a twilight sky. This scheme transitions beautifully from deep, near-black hues to vivid, glowing reds, creating a sense of depth and fiery energy. Key colors include the profound `#361B1C`, the rich `#8F3A3A`, and the radiant `#FF7B7B`. It's an excellent choice for designs that require a sophisticated yet powerful visual narrative, offering both warmth and a touch of mystery. Designers will find this palette versatile for creating depth, while developers can implement smooth transitions and distinct states.

Best used for

Cinematic title sequences and film posters
Luxury product packaging and branding
Abstract art and digital illustrations
Dramatic website headers and landing pages
Fashion lines with a bold, intense aesthetic
Mood lighting concepts for upscale venues

Suggested color roles

primary

Utilize `#8F3A3A` as the central, warm red, perfect for main content areas or significant visual elements that need to feel both strong and inviting.

secondary

Employ `#5D2B2C` for supporting elements, subheadings, or as a deeper red to add richness and visual weight without overpowering.

accent

Apply `#FF7B7B` as a bright, glowing highlight, ideal for interactive elements, small icons, or to simulate a radiant light source.

background

Designate `#361B1C` as the deepest background color, offering a dark, almost black-red base that provides excellent contrast for the brighter reds.

text

For optimal readability on dark backgrounds like `#361B1C`, use white or a very light grey. On lighter reds such as `#C24E4E`, a dark charcoal or black can be effective.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter reds like `#C24E4E` as backgrounds; consider using a darker text color.
White or near-white text is crucial on `#361B1C` and `#5D2B2C` to meet WCAG AA standards.
The gradient nature means careful consideration of text overlay color choices to maintain readability across varying background shades.
Provide enough visual distinction between the closely related red tones for users with color vision impairments.

Recommended combinations

Molten Gradient

Creates a striking visual flow from dark to light, perfect for hero banners, background gradients, or artistic compositions.

#361B1C · #8F3A3A · #FF7B7B

Twilight Glow

Ideal for highlighting sections, offering a warm, inviting glow that draws attention without being overtly aggressive.

#5D2B2C · #C24E4E · #FF7B7B

Deep Ember

Excellent for establishing a sophisticated dark theme, using subtle red variations to add warmth and depth to UI elements.

#361B1C · #5D2B2C · #8F3A3A

CSS variables

:root {
  --magma-flow-horizon-1: #361B1C;
  --magma-flow-horizon-2: #5D2B2C;
  --magma-flow-horizon-3: #8F3A3A;
  --magma-flow-horizon-4: #C24E4E;
  --magma-flow-horizon-5: #FF7B7B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-flow-horizon": {
        1: "#361B1C",
        2: "#5D2B2C",
        3: "#8F3A3A",
        4: "#C24E4E",
        5: "#FF7B7B",
      }
    }
  }
}

Hex values

Color 1#361B1C

Color 2#5D2B2C

Color 3#8F3A3A

Color 4#C24E4E

Color 5#FF7B7B

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.4:1AA18

6.3:1AA

1.4:1Fail

1.5:1Fail

2.4:1Fail

4.5:1AA

2.1:1Fail

1.5:1Fail

1.6:1Fail

3:1Fail

3.4:1AA18

2.4:1Fail

1.6:1Fail

1.9:1Fail

6.3:1AA

4.5:1AA

3:1Fail

1.9:1Fail

Similar palettes

More like Magma Flow Horizon