Back to palettes

Palette

Volcanic Glass Shard

Captures the sharp, reflective quality of volcanic glass and the dark, powerful forces of nature.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C333D#4A5560#707B87#171F26#5D6A78

Palette guide

How to use Volcanic Glass Shard

Overview

The Volcanic Glass Shard palette presents a robust collection of dark, muted blue-greys, evoking the sharp, powerful essence of volcanic rock. With deep tones like #171F26 and #2C333D, complemented by versatile mid-greys such as #4A5560 and #707B87, this palette offers a grounded and sophisticated aesthetic. It's exceptionally useful for designers and developers aiming for a strong, industrial, or natural yet refined look. The subtle blue undertones prevent the palette from feeling flat, adding a layer of complexity that mirrors the reflective quality of obsidian. This palette is perfect for creating impactful, durable, and serious digital experiences.

Best used for

  • Industrial design and engineering websites
  • Robust software interfaces and dashboards
  • Outdoor gear and adventure branding
  • Architectural firm portfolios
  • Documentary and editorial aesthetics
  • Secure application UIs

Suggested color roles

primary

Use #2C333D as the dominant color for main content areas, headers, or brand identity.

secondary

Apply #4A5560 for supporting panels, card backgrounds, or to differentiate sections.

accent

Utilize #707B87 for subtle interactive elements, borders, or icons that require a gentle accent.

background

Choose #171F26 for the deepest, most grounding background, providing a strong, dark canvas.

text

For body text, #5D6A78 or #707B87 offers optimal readability against the darker palette colors.

Accessibility notes

  • Ensure sufficient contrast when pairing #707B87 text on #171F26 or #2C333D backgrounds.
  • Avoid using #4A5560 text on #2C333D backgrounds to prevent readability issues.
  • Always test text legibility across different devices and ambient light conditions.
  • Consider using a bright white or very light grey for critical information on the darkest backgrounds.

Recommended combinations

Deep Harmony

Creates a strong, cohesive dark base for backgrounds, main content, and layered elements.

#171F26 · #2C333D · #4A5560

Subtle Gradient

Provides visual separation and depth for different content blocks or information panels.

#2C333D · #5D6A78 · #707B87

UI Definition

Ideal for interactive elements like buttons, input fields, and subtle hover or focus states.

#4A5560 · #707B87 · #5D6A78

CSS variables

:root {
  --volcanic-glass-shard-3-1: #2C333D;
  --volcanic-glass-shard-3-2: #4A5560;
  --volcanic-glass-shard-3-3: #707B87;
  --volcanic-glass-shard-3-4: #171F26;
  --volcanic-glass-shard-3-5: #5D6A78;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-shard-3": {
        1: "#2C333D",
        2: "#4A5560",
        3: "#707B87",
        4: "#171F26",
        5: "#5D6A78",
      }
    }
  }
}

Related searches

dark slate grey paletteindustrial color schemevolcanic rock colorsdeep charcoal bluemoody grey tones UI

Palette colors

Hex values

Color 1#2C333D
·
Color 2#4A5560
·
Color 3#707B87
·
Color 4#171F26
·
Color 5#5D6A78
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1Fail
1.3:1Fail
2.3:1Fail
2
1.7:1Fail
1.8:1Fail
2.2:1Fail
1.4:1Fail
3
3:1Fail
1.8:1Fail
3.9:1AA18
1.3:1Fail
4
1.3:1Fail
2.2:1Fail
3.9:1AA18
3:1AA18
5
2.3:1Fail
1.4:1Fail
1.3:1Fail
3:1AA18

Similar palettes

More like Volcanic Glass Shard

View all dark
Obsidian Shard Glimmer
Obsidian Cinder Glow
Obsidian Crater Flow
Volcanic Ash
Volcanic Ash Bloom
Volcanic Cinder Cone