Back to palettes

Palette

Molten Stone Texture

The deep, rough textures of cooling molten rock, transitioning from dark to rusty reds.

earthdark5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5C4033#800000#CD5C5C#A0522D

Palette guide

How to use Molten Stone Texture

Overview

The Molten Stone Texture palette offers a unique blend of cool grey, earthy browns, and deep, muted reds, perfectly capturing the rugged textures of cooling molten rock. This collection, featuring the grounding #36454F (Charcoal) and the rich #5C4033 (Dark Brown), along with the deep #800000 (Maroon) and the softer #CD5C5C (IndianRed), provides a sense of strength and natural authenticity. Designers can leverage these hues to create visuals that are robust, grounded, and sophisticated. Developers will find this palette excellent for crafting industrial designs, rugged branding, or immersive digital environments where a sense of earthiness and power is paramount. Its balanced mix of warm and cool tones offers great versatility.

Best used for

  • Industrial design and architectural visualizations
  • Rugged outdoor and adventure brand identities
  • Geological exhibits and science education platforms
  • Masculine product packaging and advertising
  • Textured website backgrounds and UI elements
  • Brand identity for sustainable or handcrafted goods

Suggested color roles

primary

Utilize #A0522D as a rich, earthy primary color for significant elements, offering a balance of warmth and strength.

secondary

Employ #36454F as a cool, grounding secondary color for robust backgrounds, navigation, or strong typography.

accent

Apply #CD5C5C for softer highlights, interactive elements, or to introduce a subtle warmth and visual interest.

background

Consider #5C4033 for a dark, textured background that evokes natural materials, or a light neutral for contrast.

text

White or a very light cream provides excellent readability on darker shades like #36454F and #800000. For lighter backgrounds, use #36454F for body text.

Accessibility notes

  • Light text (white or light cream) is critical for readability on dark colors like #36454F, #5C4033, and #800000.
  • Ensure sufficient contrast when pairing #CD5C5C with other mid-tones from the palette, especially for text.
  • Avoid using dark text on the darker colors; always opt for high contrast pairings for crucial information.
  • Regularly check all color combinations against WCAG guidelines to ensure accessibility for all users.

Recommended combinations

Stone & Earth

Perfect for creating deep, textured backgrounds, robust UI elements, or gradients that evoke natural rock formations.

#36454F · #5C4033 · #A0522D

Molten Vein

Ideal for emphasizing key content, buttons, or illustrations where a pop of warm red is needed against earthy tones.

#800000 · #CD5C5C · #5C4033

Rugged Contrast

Combines the cool dark grey with the earthy red-brown and a softer red for a clear hierarchy and balanced visual appeal.

#36454F · #A0522D · #CD5C5C

CSS variables

:root {
  --molten-stone-texture-1: #36454F;
  --molten-stone-texture-2: #5C4033;
  --molten-stone-texture-3: #800000;
  --molten-stone-texture-4: #CD5C5C;
  --molten-stone-texture-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "molten-stone-texture": {
        1: "#36454F",
        2: "#5C4033",
        3: "#800000",
        4: "#CD5C5C",
        5: "#A0522D",
      }
    }
  }
}

Related searches

volcanic rock color paletteearthy grey red schemeindustrial color designrugged design colorsstone texture palette

Palette colors

Hex values

Color 1#36454F
·
Color 2#5C4033
·
Color 3#800000
·
Color 4#CD5C5C
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.1:1Fail
2.5:1Fail
1.8:1Fail
2
1.1:1Fail
1.2:1Fail
2.4:1Fail
1.7:1Fail
3
1.1:1Fail
1.2:1Fail
2.8:1Fail
1.9:1Fail
4
2.5:1Fail
2.4:1Fail
2.8:1Fail
1.4:1Fail
5
1.8:1Fail
1.7:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Molten Stone Texture

View all earth