Palette

Molten Lava Glow

Intense oranges and fiery reds capture the dangerous beauty of flowing molten lava.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Molten Lava Glow 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 Lava Glow.

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

Data visualization

#FDD7B2#F8A770#F06D32#C44C1D#98340E

Palette guide

How to use Molten Lava Glow

Overview

The Molten Lava Glow palette offers a captivating gradient of warm oranges and fiery reds, mirroring the dangerous beauty of flowing molten rock. This collection transitions from the soft, ethereal #FDD7B2 to the deep, intense #98340E, providing designers with a versatile range for creating inviting yet powerful visuals. Key colors like the vibrant #F06D32 (Orange) and the rich #C44C1D (Dark Orange) ensure a dynamic aesthetic. Developers can utilize this palette to craft engaging user interfaces, compelling data visualizations, or immersive digital experiences that evoke warmth, energy, and a touch of raw natural power. Its balanced progression makes it highly adaptable.

Best used for

Food and beverage branding (spices, gourmet coffee)
Autumn-themed digital campaigns and editorials
Nature and geological documentaries or websites
Heat-related product packaging and marketing
Adventure travel and outdoor activity promotions
Inviting website backgrounds and hero sections

Suggested color roles

primary

Designate #F06D32 as the primary color for elements requiring a vibrant, yet grounded presence, such as main buttons or illustrations.

secondary

Utilize #C44C1D for supporting elements, strong accents, or subheadings, providing a deeper, more substantial feel.

accent

Employ #FDD7B2 for soft highlights, subtle gradients, or background textures to introduce a gentle glow and lightness.

background

Use #F8A770 for warm, inviting background areas, or pair with a dark neutral like charcoal for striking contrast.

text

Choose a dark brown like #98340E for body text on lighter backgrounds such as #FDD7B2, or use white text on the deeper shades like #C44C1D.

Accessibility notes

Ensure sufficient contrast for text on lighter shades like #FDD7B2 and #F8A770; dark text is crucial here.
Avoid placing light-orange text on mid-orange backgrounds, as contrast may be insufficient for readability.
The darkest color, #98340E, provides excellent contrast for white or very light text, making it suitable for primary text on dark themes.
Regularly check color combinations using WCAG guidelines, especially for interactive elements and crucial information.

Recommended combinations

Warm Glow

Excellent for gradients, soft background textures, or illustrating light sources and warm transitions.

#FDD7B2 · #F8A770 · #F06D32

Earthy Depth

Ideal for creating depth and contrast, suitable for primary elements, outlines, and strong visual anchors.

#F06D32 · #C44C1D · #98340E

High Contrast

Combine the brightest and darkest tones with a vibrant mid-tone for clear hierarchy and impactful messaging.

#FDD7B2 · #F06D32 · #98340E

CSS variables

:root {
  --molten-lava-glow-1: #FDD7B2;
  --molten-lava-glow-2: #F8A770;
  --molten-lava-glow-3: #F06D32;
  --molten-lava-glow-4: #C44C1D;
  --molten-lava-glow-5: #98340E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-lava-glow": {
        1: "#FDD7B2",
        2: "#F8A770",
        3: "#F06D32",
        4: "#C44C1D",
        5: "#98340E",
      }
    }
  }
}

Hex values

Color 1#FDD7B2

Color 2#F8A770

Color 3#F06D32

Color 4#C44C1D

Color 5#98340E

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.5:1AA18

5.5:1AA

1.4:1Fail

1.5:1Fail

2.4:1Fail

3.8:1AA18

2.2:1Fail

1.5:1Fail

1.6:1Fail

2.4:1Fail

3.5:1AA18

2.4:1Fail

1.6:1Fail

5.5:1AA

3.8:1AA18

2.4:1Fail

1.6:1Fail

Similar palettes

More like Molten Lava Glow

Molten Lava Glow

See it in context.

Ready when you are.

Built with Molten Lava Glow.

How to use Molten Lava Glow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm Glow

Earthy Depth

High Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Molten Lava Glow