Palette

Molten Glass Flow

Vivid, flowing hues of superheated glass—bright yellows and oranges melting into deep, cooled tones.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5722#FF9800#FFC107#F44336#3E2723

Palette guide

How to use Molten Glass Flow

Overview

The Molten Glass Flow palette beautifully captures the vivid, flowing hues of superheated glass, blending bright yellows and oranges with a deep, cooled tone. From the energetic #FF5722 and radiant #FF9800 to the brilliant #FFC107, this palette is anchored by the bold #F44336 and a grounding #3E2723. Designers and developers will find this collection ideal for projects requiring a modern, creative, and dynamic aesthetic. It’s perfect for artisanal product branding, innovative web designs, or any visual communication that seeks to convey transformation, craftsmanship, and vibrant energy with a sophisticated edge.

Best used for

Creative agency branding
Artisanal product packaging
Modern art installations
Dynamic web animations
UI for craft-focused apps
High-energy digital marketing

Suggested color roles

primary

Use #FF5722 as the energetic primary color for main calls to action or prominent visual elements.

secondary

Employ #FF9800 for supporting graphics or secondary interactive components, maintaining a bright and vibrant feel.

accent

Apply #FFC107 for brilliant highlights, small details, or when a luminous, warm glow is desired.

background

Utilize #3E2723 as a deep, grounding background, providing a rich contrast that makes the molten hues pop.

text

For text, #F44336 can be used for bold, accent text on light backgrounds, or bright white/light gray for optimal readability on #3E2723.

Accessibility notes

Ensure strong contrast for text, especially when using any of the warmer colors as text on #3E2723.
Avoid using #F44336 as text on #FF5722 or similar warm tones without checking contrast carefully.
Always use #FFC107 or white for critical text elements to ensure maximum readability on dark backgrounds.
For colorblind users, differentiate important information with icons or patterns, especially between red and orange shades.

Recommended combinations

Glass Glow

Creates a bright, radiating glow, perfect for highlighting interactive elements or energetic sections.

#FFC107 · #FF9800 · #FF5722

Deep Melt

Provides a dark base with fiery elements, suitable for dramatic backgrounds or impactful headlines.

#3E2723 · #F44336 · #FF5722

Warm Craft

Offers an inviting, artisanal feel, ideal for showcasing handcrafted products or creative services.

#FF9800 · #FFC107 · #3E2723

CSS variables

:root {
  --molten-glass-flow-1: #FF5722;
  --molten-glass-flow-2: #FF9800;
  --molten-glass-flow-3: #FFC107;
  --molten-glass-flow-4: #F44336;
  --molten-glass-flow-5: #3E2723;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-glass-flow": {
        1: "#FF5722",
        2: "#FF9800",
        3: "#FFC107",
        4: "#F44336",
        5: "#3E2723",
      }
    }
  }
}

Hex values

Color 1#FF5722

Color 2#FF9800

Color 3#FFC107

Color 4#F44336

Color 5#3E2723

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

1.2:1Fail

4.4:1AA18

1.5:1Fail

1.3:1Fail

1.7:1Fail

6.4:1AA

1.9:1Fail

1.3:1Fail

2.3:1Fail

8.5:1AAA

1.2:1Fail

1.7:1Fail

2.3:1Fail

3.8:1AA18

4.4:1AA18

6.4:1AA

8.5:1AAA

3.8:1AA18

Similar palettes

More like Molten Glass Flow

Sunset Prairie Wildfire

Volcano Ember Haze

Amber Spice Blend