Back to palettes

Palette

Molten Rock Flow

Intense oranges and reds depict the mesmerizing, dangerous beauty of molten rock erupting and flowing.

vibrantenergetic5 colors
More vibrant 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

#FF4500#FF8C00#FFA500#CD5C5C#8B0000

Palette guide

How to use Molten Rock Flow

Overview

The Molten Rock Flow palette (ID: molten-rock-flow) vividly captures the mesmerizing and dangerous beauty of molten rock with its intense oranges and reds. Featuring the brilliant #FF4500 (OrangeRed) and the warm #FFA500 (Orange), alongside the deep #8B0000 (DarkRed), this palette provides a dynamic and energetic range. Designers can leverage these hues to create compelling visuals that evoke heat, power, and vitality. Developers will find this palette excellent for crafting engaging user interfaces, impactful branding, or energetic digital experiences that demand attention. Its harmonious blend of vibrant and deep tones ensures versatility across various design applications, from alerts to artistic expressions.

Best used for

  • Youthful and energetic brand identities
  • Gaming and esports website design
  • Alerts, warnings, and urgent notifications
  • Vibrant digital art and illustrations
  • Outdoor adventure and extreme sports promotions
  • Food and beverage packaging for spicy products

Suggested color roles

primary

Utilize #FF8C00 (DarkOrange) as a vibrant, inviting primary color for calls to action, headings, or key UI elements.

secondary

Employ #8B0000 (DarkRed) for grounding elements, strong borders, or important subheadings, providing depth and stability.

accent

Apply #FFA500 (Orange) for bright highlights, glowing effects, or subtle background textures where a luminous feel is desired.

background

Consider #CD5C5C (IndianRed) for a warm, welcoming background that is less intense than pure red, or a dark neutral for contrast.

text

Dark charcoal or black is suitable for text on lighter shades like #FFA500. White or light grey offers excellent readability on #8B0000 and #FF4500.

Accessibility notes

  • Ensure high contrast for text on all colors, especially when using orange tones for backgrounds.
  • Avoid pairing #FF4500 with #FFA500 for text/background to prevent insufficient contrast for some users.
  • White text on #8B0000 provides excellent readability and accessibility for crucial information.
  • Always test color combinations against WCAG guidelines for text and interactive elements to ensure inclusivity.

Recommended combinations

Fiery Dynamics

Ideal for creating strong visual hierarchies, emphasizing key content, or designing impactful calls to action.

#FF4500 · #FF8C00 · #8B0000

Luminous Glow

Excellent for gradients, backgrounds, or illustrations depicting light and warmth, creating a vibrant, inviting feel.

#FF8C00 · #FFA500 · #CD5C5C

Deep Ember

Perfect for depicting depth and intensity, with the deep red grounding the brighter, energetic red-orange.

#8B0000 · #CD5C5C · #FF4500

CSS variables

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

Tailwind config

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

Related searches

vibrant lava paletteenergetic red orangevolcano color schemefiery UI designdynamic warm palette

Palette colors

Hex values

Color 1#FF4500
·
Color 2#FF8C00
·
Color 3#FFA500
·
Color 4#CD5C5C
·
Color 5#8B0000
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.7:1Fail
1.2:1Fail
2.9:1Fail
2
1.5:1Fail
1.2:1Fail
1.7:1Fail
4.3:1AA18
3
1.7:1Fail
1.2:1Fail
2:1Fail
5.1:1AA
4
1.2:1Fail
1.7:1Fail
2:1Fail
2.5:1Fail
5
2.9:1Fail
4.3:1AA18
5.1:1AA
2.5:1Fail

Similar palettes

More like Molten Rock Flow

View all vibrant
Fiery Volcano Ridge
Molten Lava Glow
Molten Rock Flow
Fiery Lava Flow
Fiery Volcano Vent
Fire Opal Radiance