Back to palettes

Palette

Volcanic Glass

Intense blacks and cool greys mimic the smooth, polished surface of obsidian and 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 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.

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

Data visualization

#000000#2C3E50#4A4A4A#778899#D3D3D3

Palette guide

How to use Volcanic Glass

Overview

The Volcanic Glass palette is a striking collection of intense black, cool blues, and versatile greys, creating a sophisticated and sharp aesthetic reminiscent of obsidian. This palette leverages #000000 for deep foundations, #2C3E50 for a cool, professional touch, and #D3D3D3 for bright contrasts, making it ideal for high-impact designs. Designers and developers can use #4A4A4A and #778899 to build nuanced layers and visual hierarchy. It offers a balanced yet dramatic feel, perfect for projects that require a strong, modern presence with a touch of elegance, truly mimicking the smooth, polished surface of volcanic rock.

Best used for

  • Luxury branding and high-end websites
  • High-tech product interfaces and dashboards
  • Professional portfolios and presentations
  • Architectural visualization and rendering
  • Cinematic and editorial design projects
  • Dark mode applications requiring strong contrast

Suggested color roles

primary

Use #000000 as the dominant background or for strong headers to establish a deep, impactful foundation.

secondary

Apply #2C3E50 for content panels, distinct sections, or navigation elements, adding a cool depth.

accent

Utilize #D3D3D3 for call-to-action buttons, key highlights, or primary text on dark backgrounds for high contrast.

background

Choose #000000 for the deepest, most impactful canvas, creating a dramatic and immersive experience.

text

For optimal readability, use #778899 or #D3D3D3 for text, especially on black or dark blue backgrounds.

Accessibility notes

  • Ensure #D3D3D3 has sufficient contrast against #000000 and #2C3E50 for all text and interactive elements.
  • Avoid using #778899 on #4A4A4A as the contrast may be insufficient for accessibility standards.
  • Always test text legibility across various devices and ambient lighting conditions.
  • For critical information, use high-contrast pairings like #D3D3D3 on #000000.

Recommended combinations

Dramatic Base

Creates a deep, sophisticated structure for backgrounds, primary content, and cool accent elements.

#000000 · #2C3E50 · #4A4A4A

High Contrast

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

#000000 · #D3D3D3 · #778899

Sleek UI

Ideal for panels, borders, subtle text, and other UI components, offering a refined appearance.

#2C3E50 · #4A4A4A · #778899

CSS variables

:root {
  --volcanic-glass-1: #000000;
  --volcanic-glass-2: #2C3E50;
  --volcanic-glass-3: #4A4A4A;
  --volcanic-glass-4: #778899;
  --volcanic-glass-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass": {
        1: "#000000",
        2: "#2C3E50",
        3: "#4A4A4A",
        4: "#778899",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

obsidian black palettecool grey blue colorsluxury dark themesharp modern designprofessional black grey

Palette colors

Hex values

Color 1#000000
·
Color 2#2C3E50
·
Color 3#4A4A4A
·
Color 4#778899
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.4:1Fail
5.8:1AA
14:1AAA
2
1.9:1Fail
1.2:1Fail
3:1AA18
7.3:1AAA
3
2.4:1Fail
1.2:1Fail
2.4:1Fail
5.9:1AA
4
5.8:1AA
3:1AA18
2.4:1Fail
2.4:1Fail
5
14:1AAA
7.3:1AAA
5.9:1AA
2.4:1Fail

Similar palettes

More like Volcanic Glass

View all Dark
Deep Space Void
Gothic Fortress Wall
Haunted Hallway Gloom
Obsidian Night Stone
Stormy Lake Mist
Volcanic Rock Ash