Palette

Molten Rock Flow

Intense reds and fiery oranges depicting the unstoppable, glowing descent of molten lava from a volcano.

WarmEnergetic5 colors

More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Molten Rock 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 Molten Rock Flow.

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

Data visualization

#550000#8B0000#B22222#FF4500#FF8C00

Palette guide

How to use Molten Rock Flow

Overview

The Molten Rock Flow palette (ID: molten-rock-flow-3) presents an unstoppable, glowing descent of intense reds and fiery oranges. Ranging from the profound #550000 to the vibrant #FF8C00, this palette captures the raw energy and heat of lava. Designers can leverage these powerful hues, including the classic #8B0000 and the bold #B22222, to create designs that are both dramatic and energetic. For developers, this palette offers a clear visual hierarchy, allowing for impactful calls to action and engaging interfaces. It is particularly well-suited for projects that require a strong, assertive, and visually striking presence, leaving a lasting impression on the viewer.

Best used for

Action-oriented marketing and advertisements
High-performance sports branding and apparel
Emergency and warning system interfaces
Energy drink and supplement packaging
Dramatic digital art and cinematic visuals
High-contrast data visualization

Suggested color roles

primary

Utilize #B22222 as a strong, assertive primary color for key elements, embodying both power and classic appeal.

secondary

Employ #FF4500 for secondary emphasis or interactive elements, providing a vibrant and energetic counterpoint.

accent

Apply #FF8C00 for bright highlights, glowing effects, or small, impactful details that need to pop.

background

Consider #550000 for a deep, grounding background that exudes sophistication and intensity, or pair with a dark neutral.

text

White or a very light cream provides optimal contrast for text on #550000 and #8B0000. For lighter backgrounds, use a dark charcoal or black.

Accessibility notes

Ensure sufficient contrast for text on all colors, especially when using lighter oranges like #FF8C00 as background.
White text on the deep reds (#550000, #8B0000, #B22222) offers excellent readability and meets WCAG standards.
Avoid using red text on orange backgrounds, or vice versa, to prevent visual strain and accessibility issues.
Test interactive elements for clear focus states, particularly those using the brighter orange accents.

Recommended combinations

Deep Impact

Creates a powerful visual hierarchy, ideal for hero sections or prominent calls to action, moving from deep to bright.

#550000 · #B22222 · #FF4500

Fiery Glow

Excellent for illustrating light sources, gradients, or energetic graphics where a luminous effect is desired.

#8B0000 · #FF4500 · #FF8C00

Bold Contrast

Combines the brightest accent with strong reds for clear distinction in UI elements or data visualization.

#FF8C00 · #B22222 · #550000

CSS variables

:root {
  --molten-rock-flow-3-1: #550000;
  --molten-rock-flow-3-2: #8B0000;
  --molten-rock-flow-3-3: #B22222;
  --molten-rock-flow-3-4: #FF4500;
  --molten-rock-flow-3-5: #FF8C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-rock-flow-3": {
        1: "#550000",
        2: "#8B0000",
        3: "#B22222",
        4: "#FF4500",
        5: "#FF8C00",
      }
    }
  }
}

Hex values

Color 1#550000

Color 2#8B0000

Color 3#B22222

Color 4#FF4500

Color 5#FF8C00

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

4.4:1AA18

6.5:1AA

1.5:1Fail

2.9:1Fail

4.3:1AA18

2.3:1Fail

1.5:1Fail

1.9:1Fail

2.9:1Fail

4.4:1AA18

2.9:1Fail

1.9:1Fail

1.5:1Fail

6.5:1AA

4.3:1AA18

2.9:1Fail

1.5:1Fail

Similar palettes

More like Molten Rock Flow

Molten Rock Flow

See it in context.

Ready when you are.

Built with Molten Rock Flow.

How to use Molten Rock Flow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Impact

Fiery Glow

Bold Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Molten Rock Flow