Back to palettes

Palette

Volcanic Glass Shards

Sharp, intense greys and blacks, like newly formed shards of obsidian from a volcanic flow.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0d0d0d#2e2e2e#5c5c5c#8c8c8c#b0b0b0

Palette guide

How to use Volcanic Glass Shards

Overview

The Volcanic Glass Shards palette offers an intense, sharp monochrome gradient, moving from the deepest black #0d0d0d to lighter greys like #b0b0b0. This collection is designed for designers and developers seeking to create modern, edgy, and high-contrast digital experiences. The distinct steps between #2e2e2e, #5c5c5c, and #8c8c8c allow for clear visual hierarchy and dynamic depth, mirroring the sharp, newly formed shards of obsidian. It's a powerful palette for projects that demand a strong visual impact and a sophisticated dark aesthetic, ensuring a memorable and professional user experience.

Best used for

  • Edgy fashion and lifestyle brands
  • Tech startup websites and apps
  • Dark mode themes with strong contrast
  • Luxury automotive interfaces
  • Contemporary art platforms
  • Music production software UIs

Suggested color roles

primary

Use #0d0d0d as the dominant background or for large, impactful elements to create a deep, anchoring presence.

secondary

Apply #2e2e2e for content containers, secondary sections, or to provide subtle differentiation.

accent

Utilize #8c8c8c for interactive elements, subtle highlights, or icons that need to stand out against darker tones.

background

Choose #0d0d0d for the deepest, most immersive background, setting a dramatic stage for content.

text

For optimal readability, use #5c5c5c or #b0b0b0 for text, ensuring sufficient contrast on darker backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #5c5c5c or #8c8c8c on #0d0d0d or #2e2e2e backgrounds.
  • Avoid using similar mid-tone greys for text and background to prevent readability issues.
  • Always test text legibility across various devices and ambient lighting conditions.
  • For critical information or calls to action, consider using a stark white text on the darkest backgrounds.

Recommended combinations

Dark Foundation

Establishes a robust, dark base for backgrounds, primary content, and structural elements.

#0D0D0D · #2E2E2E · #5C5C5C

Dynamic Contrast

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

#2E2E2E · #8C8C8C · #B0B0B0

UI Depth

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

#5C5C5C · #8C8C8C · #B0B0B0

CSS variables

:root {
  --volcanic-glass-shards-1: #0d0d0d;
  --volcanic-glass-shards-2: #2e2e2e;
  --volcanic-glass-shards-3: #5c5c5c;
  --volcanic-glass-shards-4: #8c8c8c;
  --volcanic-glass-shards-5: #b0b0b0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-shards": {
        1: "#0d0d0d",
        2: "#2e2e2e",
        3: "#5c5c5c",
        4: "#8c8c8c",
        5: "#b0b0b0",
      }
    }
  }
}

Related searches

sharp grey paletteobsidian black greyintense monochromedark mode UI colorsmodern minimalist dark

Palette colors

Hex values

Color 1#0d0d0d
·
Color 2#2e2e2e
·
Color 3#5c5c5c
·
Color 4#8c8c8c
·
Color 5#b0b0b0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.9:1Fail
5.8:1AA
9:1AAA
2
1.4:1Fail
2:1Fail
4:1AA18
6.3:1AA
3
2.9:1Fail
2:1Fail
2:1Fail
3.1:1AA18
4
5.8:1AA
4:1AA18
2:1Fail
1.6:1Fail
5
9:1AAA
6.3:1AA
3.1:1AA18
1.6:1Fail

Similar palettes

More like Volcanic Glass Shards

View all monochrome
Basalt Pillar Shades
Noir Film Shadows
Shadowed Obsidian
Volcanic Obsidian Flow
Winter Gloom
Gothic Revival