Back to palettes

Palette

Volcanic Glass Heart

Deep, brooding greys that capture the intense heat and raw power of a blacksmith's forge or volcanic rock.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Glass Heart 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 Glass Heart.

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

Data visualization

#1A1A1A#333333#4D4D4D#666666#0A0A0A

Palette guide

How to use Volcanic Glass Heart

Overview

The Volcanic Glass Heart palette is a collection of deep, brooding greys, perfect for evoking a sense of intense power and raw sophistication. Featuring ultra-dark tones like #0A0A0A and #1A1A1A, alongside versatile mid-greys such as #4D4D4D and #666666, this palette offers designers and developers a robust foundation for minimalist and modern aesthetics. It's ideal for creating interfaces that feel premium, strong, and understated. The subtle variations between the greys allow for depth and hierarchy without relying on high contrast, capturing the essence of a blacksmith's forge or polished volcanic rock. Utilize this palette to build elegant, professional, and impactful digital experiences.

Best used for

  • High-end luxury branding
  • Minimalist dark mode UI/UX
  • Professional tech dashboards
  • Architectural visualization
  • Modern art gallery websites
  • E-commerce for exclusive products

Suggested color roles

primary

Use #1A1A1A as the dominant brand color for large sections, headers, or a sophisticated base.

secondary

Employ #333333 for supporting elements like secondary panels, card backgrounds, or active navigation states.

accent

Apply #666666 for subtle interactive elements, borders, or muted icons that need gentle emphasis.

background

Utilize #0A0A0A for the deepest, most immersive background, providing an ultra-dark canvas.

text

For body text, use #4D4D4D or #666666 against darker backgrounds for optimal readability and a refined look.

Accessibility notes

  • Ensure sufficient contrast when pairing #666666 text on #1A1A1A or #0A0A0A backgrounds.
  • Avoid using #333333 text on #1A1A1A as contrast might be insufficient for accessibility standards.
  • Always test text legibility on different screen types and lighting conditions.
  • Provide alternative text styles for users requiring higher contrast, such as near-white on #0A0A0A.

Recommended combinations

Deep Foundation

Establishes a solid, dark base for backgrounds and primary content areas.

#0A0A0A · #1A1A1A · #333333

Layered Depth

Creates visual hierarchy and separation for layered UI components or information blocks.

#1A1A1A · #4D4D4D · #666666

Subtle UI

Perfect for interactive elements like buttons, input fields, and subtle hover states.

#333333 · #666666 · #4D4D4D

CSS variables

:root {
  --volcanic-glass-heart-1: #1A1A1A;
  --volcanic-glass-heart-2: #333333;
  --volcanic-glass-heart-3: #4D4D4D;
  --volcanic-glass-heart-4: #666666;
  --volcanic-glass-heart-5: #0A0A0A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-heart": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4D4D4D",
        4: "#666666",
        5: "#0A0A0A",
      }
    }
  }
}

Related searches

dark grey brandingminimalist black palettemodern grey UI colorsobsidian color schemeprofessional dark theme

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#4D4D4D
·
Color 4#666666
·
Color 5#0A0A0A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3:1AA18
1.1:1Fail
2
1.4:1Fail
1.5:1Fail
2.2:1Fail
1.6:1Fail
3
2.1:1Fail
1.5:1Fail
1.5:1Fail
2.3:1Fail
4
3:1AA18
2.2:1Fail
1.5:1Fail
3.4:1AA18
5
1.1:1Fail
1.6:1Fail
2.3:1Fail
3.4:1AA18

Similar palettes

More like Volcanic Glass Heart

View all dark
Black Shard Reflection
Charcoal Depths
Cosmic Void Depths
Deep Volcanic Glass
Industrial Noir Canvas
Midnight Stone Garden