Back to palettes

Palette

Volcanic Glass Shard

A spectrum of deep greys, mimicking the smooth, reflective surface of volcanic obsidian.

monochromeminimal5 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

#303030#484848#606060#787878#909090

Palette guide

How to use Volcanic Glass Shard

Overview

The Volcanic Glass Shard palette presents a sleek spectrum of deep greys, from #303030 to #909090, perfectly mimicking the smooth, reflective surface of volcanic obsidian. This monochrome collection offers designers and developers a versatile toolkit for creating minimalist, modern, and sophisticated digital experiences. The subtle gradations between #484848, #606060, and #787878 allow for clear visual hierarchy and depth without the need for additional colors, ensuring a clean and professional aesthetic. It’s an excellent choice for projects requiring understated elegance and a strong, consistent brand presence, particularly in dark mode applications.

Best used for

  • Minimalist website designs
  • Corporate reports and presentations
  • High-end art gallery platforms
  • Luxury product packaging design
  • Dark mode application themes
  • Professional portfolio showcases

Suggested color roles

primary

Use #303030 as the dominant tone for main content areas, headers, or a sophisticated background.

secondary

Apply #484848 for supporting panels, card backgrounds, or to create subtle divisions.

accent

Utilize #787878 for subtle interactive elements, borders, or muted icons that require gentle differentiation.

background

Choose #303030 for a consistent, deep grey background that anchors the design.

text

For optimal readability, use #606060 or #909090 for text against the darker greys in the palette.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #606060 on #303030 or #484848 backgrounds.
  • Avoid using lighter greys like #787878 or #909090 as backgrounds for text in similar mid-tones.
  • Always test text legibility across various devices and ambient lighting conditions.
  • Consider using a stark white text on the darkest greys for critical information or calls to action.

Recommended combinations

Deep Layers

Establishes a foundational dark base with progressive depth for content and background elements.

#303030 · #484848 · #606060

Contrast Gradient

Creates visual separation and highlights for text, headings, and interactive components.

#484848 · #787878 · #909090

UI Definition

Ideal for subtle dividers, inactive states, icons, and outlining interactive elements.

#606060 · #787878 · #909090

CSS variables

:root {
  --volcanic-glass-shard-4-1: #303030;
  --volcanic-glass-shard-4-2: #484848;
  --volcanic-glass-shard-4-3: #606060;
  --volcanic-glass-shard-4-4: #787878;
  --volcanic-glass-shard-4-5: #909090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-shard-4": {
        1: "#303030",
        2: "#484848",
        3: "#606060",
        4: "#787878",
        5: "#909090",
      }
    }
  }
}

Related searches

monochrome grey paletteobsidian grey colorsminimalist dark themeprofessional grey scalesleek dark UI

Palette colors

Hex values

Color 1#303030
·
Color 2#484848
·
Color 3#606060
·
Color 4#787878
·
Color 5#909090
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3:1Fail
4.1:1AA18
2
1.4:1Fail
1.5:1Fail
2.1:1Fail
2.9:1Fail
3
2.1:1Fail
1.5:1Fail
1.4:1Fail
2:1Fail
4
3:1Fail
2.1:1Fail
1.4:1Fail
1.4:1Fail
5
4.1:1AA18
2.9:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Volcanic Glass Shard

View all monochrome
Basalt Rock Formation
Charcoal River Stone
City Alley Shadow
Obsidian Sky Mirror
Shadowed Ink Canvas
Abstract Canvas Swirl