Palette

Volcanic Earth Crust

Represents the stark beauty of cooling volcanic rock, where dark obsidian meets subtle embers.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Earth Crust 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 Volcanic Earth Crust.

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

Data visualization

#1C1C1C#36454F#505050#CC5500#800000

Palette guide

How to use Volcanic Earth Crust

Overview

The "Volcanic Earth Crust" palette captures the raw beauty of cooling volcanic rock, blending deep, somber greys with intense, fiery accents. Dominated by the near-black #1C1C1C and dark slate #36454F, it finds striking contrast in the vibrant #CC5500 (Burnt Orange) and deep #800000 (Maroon). This palette is perfect for designs seeking a powerful, grounded yet energetic feel. Designers can use it to evoke strength and natural drama, while developers will appreciate the clear distinction between background and accent colors for impactful UI.

Best used for

Adventure or outdoor brand websites
Gaming interfaces with a rugged theme
Powerful corporate branding
Editorial design for scientific topics
Dramatic photography presentations
Industrial product showcases

Suggested color roles

primary

#1C1C1C - A solid, deep black for foundational backgrounds, conveying strength and seriousness.

secondary

#36454F - A dark slate grey for main content areas or secondary structural elements, adding subtle texture.

accent

#CC5500 - A bold burnt orange for calls to action, warnings, or key highlights, symbolizing lava's glow.

background

#1C1C1C - Provides a stark, dark canvas, allowing the warmer accents to truly pop with intensity.

text

#505050 for secondary details, or a light grey/white for primary text on dark backgrounds.

Accessibility notes

Ensure #CC5500 and #800000 text has sufficient contrast on #1C1C1C or #36454F backgrounds.
#505050 is a mid-tone and may require careful placement for readability, especially on similar greys.
Use a light grey or white for body text over the darkest backgrounds for optimal readability.
Prioritize high contrast for interactive elements and critical information.

Recommended combinations

Fiery Core

Ideal for a dramatic, high-impact design, using the dark as a base and the warm colors for intense focus.

#1C1C1C · #CC5500 · #800000

Molten Edge

Creates a rugged, textured feel, perfect for content blocks with a striking highlight.

#36454F · #CC5500 · #505050

Deep Earth

A sophisticated monochromatic base for sections requiring subtle depth and professionalism.

#1C1C1C · #505050 · #36454F

CSS variables

:root {
  --volcanic-earth-crust-1: #1C1C1C;
  --volcanic-earth-crust-2: #36454F;
  --volcanic-earth-crust-3: #505050;
  --volcanic-earth-crust-4: #CC5500;
  --volcanic-earth-crust-5: #800000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-earth-crust": {
        1: "#1C1C1C",
        2: "#36454F",
        3: "#505050",
        4: "#CC5500",
        5: "#800000",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#36454F

Color 3#505050

Color 4#CC5500

Color 5#800000

Accessibility

Contrast checker

1.7:1Fail

2.1:1Fail

3.9:1AA18

1.6:1Fail

1.7:1Fail

1.2:1Fail

2.3:1Fail

1.1:1Fail

2.1:1Fail

1.2:1Fail

1.9:1Fail

1.4:1Fail

3.9:1AA18

2.3:1Fail

1.9:1Fail

2.5:1Fail

1.6:1Fail

1.1:1Fail

1.4:1Fail

2.5:1Fail

Similar palettes

More like Volcanic Earth Crust

Obsidian Flow Texture