Palette

Molten Core

An intense and dramatic palette, representing the raw power of molten lava against dark, volcanic ash.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#FF4500#FF8C00#4F4F4F#000000

Palette guide

How to use Molten Core

Overview

The Molten Core palette captures the dramatic essence of volcanic power, blending intense fiery hues with deep, grounding blacks and grays. From the bold #8B0000 and vivid #FF4500 to the bright #FF8C00, this palette is anchored by a stark #000000 and a subtle #4F4F4F. It's an ideal choice for designers and developers aiming to create high-impact, energetic, and sophisticated visuals. The contrast between the molten reds/oranges and the dark neutrals provides a strong foundation for gaming UIs, dark mode applications, or any design requiring a powerful, unyielding aesthetic that commands attention and conveys strength.

Best used for

Dark mode interfaces
Gaming UI and environments
Heavy metal or rock music branding
Action movie posters and promotions
High-contrast digital art
Sophisticated, intense websites

Suggested color roles

primary

Designate #FF4500 as the primary color for elements that need maximum energy and visibility, like main calls to action.

secondary

Utilize #FF8C00 for secondary interactive elements or supporting graphics, offering a slightly softer but still vibrant glow.

accent

Reserve #8B0000 for subtle accents or to add depth to fiery elements, providing a rich, dark red highlight.

background

Employ #000000 as the foundational background, creating a dramatic stage for the vibrant molten colors.

text

Use #4F4F4F for subtle secondary text on light backgrounds, or bright white/light gray for optimal legibility against the dark #000000 and #4F4F4F.

Accessibility notes

Ensure that text in #FF4500 or #FF8C00 has sufficient contrast against #000000 or #4F4F4F.
Avoid placing #8B0000 text on #4F4F4F without careful contrast checking; prefer lighter text.
Always test readability for critical information, especially for smaller font sizes.
When using red and orange together, ensure distinct luminance differences for users with color vision deficiencies.

Recommended combinations

Volcanic Contrast

Creates a striking contrast, ideal for powerful headlines or main interface elements in dark mode.

#000000 · #FF4500 · #4F4F4F

Lava Flow

Perfect for depicting flowing, energetic elements, like progress bars or animated backgrounds.

#8B0000 · #FF4500 · #FF8C00

Ash & Ember

Provides a grounded yet energetic feel, suitable for secondary sections with a pop of warmth.

#4F4F4F · #000000 · #FF8C00

CSS variables

:root {
  --molten-core-1: #8B0000;
  --molten-core-2: #FF4500;
  --molten-core-3: #FF8C00;
  --molten-core-4: #4F4F4F;
  --molten-core-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-core": {
        1: "#8B0000",
        2: "#FF4500",
        3: "#FF8C00",
        4: "#4F4F4F",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#FF4500

Color 3#FF8C00

Color 4#4F4F4F

Color 5#000000

Accessibility

Contrast checker

2.9:1Fail

4.3:1AA18

1.2:1Fail

2.1:1Fail

2.9:1Fail

1.5:1Fail

2.4:1Fail

6.1:1AA

4.3:1AA18

1.5:1Fail

3.5:1AA18

9:1AAA

1.2:1Fail

2.4:1Fail

3.5:1AA18

2.6:1Fail

2.1:1Fail

6.1:1AA

9:1AAA

2.6:1Fail

Similar palettes

More like Molten Core

Carnival Midnight Sky

Cyberpunk Cityscape

Cyberpunk Metropolis