Palette

Volcanic Stone Grime

The raw, textured griminess of cooled volcanic rock, reflecting ancient power.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Stone Grime 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 Stone Grime.

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

Data visualization

#36454F#5F6A71#8E9BA2#2B3A44#6F7F87

Palette guide

How to use Volcanic Stone Grime

Overview

The Volcanic Stone Grime palette offers a robust and sophisticated range of dark, muted greys and charcoals, perfect for designs requiring a strong, grounded aesthetic. Featuring deep tones like #2B3A44 and #36454F alongside lighter, textured greys such as #5F6A71, #6F7F87, and #8E9BA2, this collection evokes the raw power and ancient feel of cooled volcanic rock. It's an excellent choice for projects aiming for a rugged, industrial, or natural yet refined mood, providing a versatile foundation for both digital interfaces and physical branding.

Best used for

Industrial design and branding
Masculine product packaging
Dark mode user interfaces
Architectural visualization
Urban photography backdrops
Rugged outdoor gear branding

Suggested color roles

primary

Use #36454F as a dominant, grounding color for large areas or primary elements, conveying stability.

secondary

Apply #5F6A71 for supporting sections, subheadings, or secondary graphical elements, providing subtle variation.

accent

Utilize #8E9BA2 for subtle highlights, small icons, or call-to-action elements where a soft contrast is desired.

background

Employ #2B3A44 as a deep, immersive background color, creating a rich and sophisticated canvas.

text

For body text, use #8E9BA2 on darker backgrounds or a near-white color like #F0F0F0 for optimal readability on #2B3A44.

Accessibility notes

Ensure sufficient contrast when pairing #8E9BA2 text with darker shades like #2B3A44.
Avoid using #5F6A71 or #6F7F87 for small text on similar mid-tone backgrounds to prevent readability issues.
Consider using a lighter grey like #8E9BA2 for essential UI elements on dark backgrounds.
Test color pairings with accessibility checkers to meet WCAG guidelines, especially for text and interactive elements.

Recommended combinations

Industrial Depth

Ideal for creating a strong, foundational dark theme with subtle depth and texture.

#2B3A44 · #36454F · #5F6A71

Rugged Contrast

Provides a balanced contrast for headers, sub-sections, and clear content separation.

#36454F · #8E9BA2 · #6F7F87

Subtle Highlight

Effective for backgrounds with lighter text and accent elements, maintaining a sophisticated feel.

#2B3A44 · #6F7F87 · #8E9BA2

CSS variables

:root {
  --volcanic-stone-grime-1: #36454F;
  --volcanic-stone-grime-2: #5F6A71;
  --volcanic-stone-grime-3: #8E9BA2;
  --volcanic-stone-grime-4: #2B3A44;
  --volcanic-stone-grime-5: #6F7F87;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-stone-grime": {
        1: "#36454F",
        2: "#5F6A71",
        3: "#8E9BA2",
        4: "#2B3A44",
        5: "#6F7F87",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5F6A71

Color 3#8E9BA2

Color 4#2B3A44

Color 5#6F7F87

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

1.2:1Fail

2.4:1Fail

1.8:1Fail

1.9:1Fail

2.1:1Fail

1.3:1Fail

3.5:1AA18

1.9:1Fail

4.1:1AA18

1.5:1Fail

1.2:1Fail

2.1:1Fail

4.1:1AA18

2.8:1Fail

2.4:1Fail

1.3:1Fail

1.5:1Fail

2.8:1Fail

Similar palettes

More like Volcanic Stone Grime

View all dark

Lava Rock Texture

Obsidian Shard Grey

Ancient Forest Depths

Basalt Ridge Shadow

Cathedral Shadow Grey

Celestial Altar Stone