Back to palettes

Palette

Molten Rock

A fiery gradient from deep crimson to glowing ember, capturing the raw power of molten rock.

darkenergetic5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#360C09#78231C#B14337#DD6C5B#F5B4AB

Palette guide

How to use Molten Rock

Overview

The Molten Rock palette offers an elegant and sophisticated gradient, transitioning from the very dark, almost black-brown #360C09 to the soft, warm pinkish-red #F5B4AB. This collection, featuring the rich #78231C and the balanced #B14337, expertly captures the raw power of molten rock with a refined aesthetic. Designers can leverage this palette to create visuals that are both powerful and luxurious. Developers will find these hues excellent for building high-end interfaces, sophisticated branding, or editorial layouts where depth, warmth, and subtle intensity are key. Its harmonious progression ensures a visually cohesive and impactful design experience across various applications.

Best used for

  • High-end fashion and luxury brand identities
  • Sophisticated web design and editorial layouts
  • Warm and inviting product packaging
  • Elegant interior design visualizations
  • Artistic and fine photography presentations
  • Brand storytelling with a sense of depth

Suggested color roles

primary

Utilize #B14337 as a balanced, rich primary red for headings or significant graphical elements, offering warmth and sophistication.

secondary

Employ #78231C for supporting content, strong borders, or to add a deeper, more grounded tone.

accent

Apply #F5B4AB for soft highlights, delicate textures, or as a contrasting light element to add a gentle glow.

background

Consider #360C09 for a very dark, luxurious background that creates a dramatic contrast, or a light neutral for an airy feel.

text

White or a very light cream provides excellent readability on darker shades like #360C09 and #78231C. For lighter backgrounds, use #360C09 for body text.

Accessibility notes

  • Light text (white, light grey) is paramount for readability on the darker colors of this palette, meeting WCAG standards.
  • Ensure sufficient contrast when using mid-tones like #B14337 for text against other palette colors.
  • Avoid using #F5B4AB for small text on light backgrounds, as its lightness may reduce readability.
  • Always verify color combinations with a contrast checker, especially for interactive elements and crucial information.

Recommended combinations

Dark Elegance

Perfect for creating deep, luxurious backgrounds, sophisticated UI elements, or gradients with a strong, grounded feel.

#360C09 · #78231C · #B14337

Soft Ember

Ideal for depicting light, warmth, or subtle transitions, creating a gentle yet vibrant effect in illustrations or highlights.

#B14337 · #DD6C5B · #F5B4AB

Rich Contrast

Combines the darkest, mid-tone, and lightest shades for a clear visual hierarchy and impactful, elegant design statements.

#360C09 · #B14337 · #F5B4AB

CSS variables

:root {
  --molten-rock-1: #360C09;
  --molten-rock-2: #78231C;
  --molten-rock-3: #B14337;
  --molten-rock-4: #DD6C5B;
  --molten-rock-5: #F5B4AB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-rock": {
        1: "#360C09",
        2: "#78231C",
        3: "#B14337",
        4: "#DD6C5B",
        5: "#F5B4AB",
      }
    }
  }
}

Related searches

elegant red brown palettesophisticated volcanic colorsdark red gradient schemeluxury color combinationswarm earth tones design

Palette colors

Hex values

Color 1#360C09
·
Color 2#78231C
·
Color 3#B14337
·
Color 4#DD6C5B
·
Color 5#F5B4AB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.1:1AA18
5.3:1AA
9.9:1AAA
2
1.7:1Fail
1.8:1Fail
3.1:1AA18
5.8:1AA
3
3.1:1AA18
1.8:1Fail
1.7:1Fail
3.2:1AA18
4
5.3:1AA
3.1:1AA18
1.7:1Fail
1.9:1Fail
5
9.9:1AAA
5.8:1AA
3.2:1AA18
1.9:1Fail

Similar palettes

More like Molten Rock

View all dark
Volcanic Rock Ember
Magma River Flow
Volcanic Flow Ember
Fiery Nebula Rift
Grunge Alley Art
Molten Core