Palette

Molten Sky Inferno

Intense oranges and deep reds ignite the senses, like a fiery sunset over a volcanic landscape.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Molten Sky Inferno 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 Sky Inferno.

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

Data visualization

#FFF3DF#FFE0B3#FF9933#CC5200#8C2900

Palette guide

How to use Molten Sky Inferno

Overview

The Molten Sky Inferno palette ignites designs with a vivid transition from near-white cream to deep, dark orange-brown, reminiscent of a fiery sunset over a volcanic landscape. Featuring the soft #FFF3DF and the inviting #FFE0B3, alongside the vibrant #FF9933 and the intense #CC5200, this palette is rich with warmth and drama. Designers can leverage these hues to create compelling visuals that evoke energy, comfort, and dramatic storytelling. Developers will find this palette excellent for crafting engaging interfaces, impactful branding, or immersive digital experiences that require a balance of warmth and intensity. Its range allows for clear visual hierarchy.

Best used for

Travel and tourism marketing (desert, sunset themes)
Food and beverage branding (coffee, spices, baked goods)
Dramatic storytelling and editorial design
Autumn-themed digital campaigns and seasonal promotions
Warm and inviting website hero sections
Educational content about natural phenomena

Suggested color roles

primary

Utilize #FF9933 as a vibrant, classic orange for main calls to action, important headings, or key graphical elements.

secondary

Employ #CC5200 for supporting elements, strong accents, or subheadings, providing a deeper, more grounded orange.

accent

Apply #FFF3DF for bright highlights, soft backgrounds, or delicate textures to introduce luminosity and lightness.

background

Consider #FFE0B3 for a light, inviting background that provides a warm base, or a very dark neutral for high contrast.

text

For optimal readability on lighter shades like #FFF3DF, use a dark brown like #8C2900 or black. White text pairs well with #CC5200 and #8C2900.

Accessibility notes

Ensure strong contrast for text on lighter colors like #FFF3DF and #FFE0B3; dark text is crucial here.
Avoid using light orange text on mid-orange backgrounds to prevent insufficient contrast for users with visual impairments.
The darkest color, #8C2900, offers excellent contrast for white text, suitable for primary text on dark themes.
Regularly check all color combinations against WCAG guidelines, especially for interactive elements and crucial information.

Recommended combinations

Sunrise Glow

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

#FFF3DF · #FFE0B3 · #FF9933

Inferno Depth

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

#FF9933 · #CC5200 · #8C2900

Dramatic Sky

Combines the lightest and darkest tones with a strong mid-orange for clear hierarchy and impactful, dramatic messaging.

#FFF3DF · #CC5200 · #8C2900

CSS variables

:root {
  --molten-sky-inferno-1: #FFF3DF;
  --molten-sky-inferno-2: #FFE0B3;
  --molten-sky-inferno-3: #FF9933;
  --molten-sky-inferno-4: #CC5200;
  --molten-sky-inferno-5: #8C2900;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-sky-inferno": {
        1: "#FFF3DF",
        2: "#FFE0B3",
        3: "#FF9933",
        4: "#CC5200",
        5: "#8C2900",
      }
    }
  }
}

Hex values

Color 1#FFF3DF

Color 2#FFE0B3

Color 3#FF9933

Color 4#CC5200

Color 5#8C2900

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

4:1AA18

7.9:1AAA

1.2:1Fail

1.7:1Fail

3.5:1AA18

6.8:1AA

1.9:1Fail

1.7:1Fail

2.1:1Fail

4.1:1AA18