Back to palettes

Palette

Volcanic Glass Shard

A stark gradient of dark grays, inspired by the smooth, intense obsidian of volcanic rock.

monochromedark5 colors
More monochrome 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

#0F0F0F#303030#505050#707070#909090

Palette guide

How to use Volcanic Glass Shard

Overview

The Volcanic Glass Shard palette delivers a stark and dramatic gradient of dark greys, from the near-black #0F0F0F to the muted #909090, capturing the intense essence of obsidian volcanic rock. This monochrome collection provides designers and developers with a powerful tool for creating bold, modern, and serious aesthetics. The distinct steps between #303030, #505050, and #707070 enable clear visual hierarchy and depth, making it ideal for high-contrast designs where impact is key. It's perfect for projects that demand a sophisticated and understated yet strong presence, particularly in dark mode applications.

Best used for

  • High-contrast photography portfolios
  • Luxury brand interfaces and websites
  • Gaming UI/UX designs
  • Cinematic title sequences and credits
  • Modern art exhibition websites
  • Tech startup branding

Suggested color roles

primary

Use #0F0F0F as the dominant background or for large, impactful elements to establish a deep foundation.

secondary

Apply #303030 for content panels, secondary sections, or to provide subtle differentiation.

accent

Utilize #707070 for subtle interactive elements, borders, or muted icons that need gentle emphasis.

background

Choose #0F0F0F for the ultimate dark canvas, providing a dramatic and immersive experience.

text

For optimal readability, use #505050 or #909090 for text, depending on the background color's depth.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #505050 or #707070 on #0F0F0F or #303030 backgrounds.
  • Avoid using mid-tone greys as text on similar mid-tone backgrounds, which can hinder readability.
  • Always test text legibility across various devices and ambient lighting conditions.
  • For critical information, consider using a stark white text on the darkest backgrounds like #0F0F0F.

Recommended combinations

Deep Gradient

Establishes a layered dark foundation for backgrounds, main content, and structural elements.

#0F0F0F · #303030 · #505050

Highlight Contrast

Creates clear visual separation for headings, body text, and interactive elements.

#303030 · #707070 · #909090

Subtle UI

Ideal for dividers, inactive states, icons, and providing subtle definition to UI components.

#505050 · #707070 · #909090

CSS variables

:root {
  --volcanic-glass-shard-1: #0F0F0F;
  --volcanic-glass-shard-2: #303030;
  --volcanic-glass-shard-3: #505050;
  --volcanic-glass-shard-4: #707070;
  --volcanic-glass-shard-5: #909090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-shard": {
        1: "#0F0F0F",
        2: "#303030",
        3: "#505050",
        4: "#707070",
        5: "#909090",
      }
    }
  }
}

Related searches

dramatic grey paletteobsidian dark themestark monochrome colorsluxury dark UIminimalist grey gradient

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#303030
·
Color 3#505050
·
Color 4#707070
·
Color 5#909090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.4:1Fail
3.9:1AA18
6:1AA
2
1.5:1Fail
1.6:1Fail
2.7:1Fail
4.1:1AA18
3
2.4:1Fail
1.6:1Fail
1.6:1Fail
2.5:1Fail
4
3.9:1AA18
2.7:1Fail
1.6:1Fail
1.6:1Fail
5
6:1AA
4.1:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Volcanic Glass Shard

View all monochrome
Volcanic Ash Drift
Volcanic Glass Spires
Volcanic Obsidian Flow
Basalt Column Grey
Basalt Pillar Shades
Licorice Drop