Palette

Volcanic Glass Veins

A dark, intense monochrome palette mimicking the smooth, obsidian-like surfaces and intricate veins of volcanic glass.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2E2E2E#505050#757575#A0A0A0#CCCCCC

Palette guide

How to use Volcanic Glass Veins

Overview

The Volcanic Glass Veins palette is a versatile monochrome collection, ranging from deep charcoal #2E2E2E to light grey #CCCCCC, perfectly mimicking the smooth, obsidian-like surfaces and intricate veins of volcanic glass. This palette empowers designers and developers to create visual depth and clear hierarchies within dark mode designs. With intermediate tones like #505050, #757575, and #A0A0A0, it offers excellent flexibility for defining various UI elements while maintaining a cohesive and sophisticated aesthetic. It's an ideal choice for projects demanding elegance, strength, and a nuanced visual experience.

Best used for

Enterprise dashboards and analytics platforms
Technical documentation and knowledge bases
Elegant web applications and portals
Scientific visualizations and data interfaces
Luxury digital products and services
Content-heavy dark mode websites

Suggested color roles

primary

Use #2E2E2E as the main background or for foundational elements to establish a deep, grounding canvas.

secondary

Apply #505050 for content panels, distinct sections, or to differentiate information blocks.

accent

Utilize #A0A0A0 for interactive elements, subtle branding, or key highlights that need gentle emphasis.

background

Choose #2E2E2E for a deep, grounding canvas that provides a sophisticated backdrop for content.

text

For optimal readability, use #757575 or #CCCCCC for text against the darker backgrounds in the palette.

Accessibility notes

Prioritize contrast for text, using lighter shades like #CCCCCC for primary text on #2E2E2E or #505050.
Avoid using mid-tone greys for text on similar mid-tone backgrounds to prevent readability issues.
Always test text legibility across various devices and ambient lighting conditions.
Ensure interactive elements have sufficient contrast for both normal and hover/focus states.

Recommended combinations

Base Structure

Creates a robust, dark base for backgrounds, main content, and structural elements.

#2E2E2E · #505050 · #757575

Text & UI Elements

Provides clear contrast for headings, body text, and interactive components, ensuring legibility.

#505050 · #A0A0A0 · #CCCCCC

Subtle Depth

Ideal for borders, inactive states, subtle patterns, and providing definition to UI components.

#757575 · #A0A0A0 · #CCCCCC

CSS variables

:root {
  --volcanic-glass-veins-1: #2E2E2E;
  --volcanic-glass-veins-2: #505050;
  --volcanic-glass-veins-3: #757575;
  --volcanic-glass-veins-4: #A0A0A0;
  --volcanic-glass-veins-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-veins": {
        1: "#2E2E2E",
        2: "#505050",
        3: "#757575",
        4: "#A0A0A0",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#2E2E2E

Color 2#505050

Color 3#757575

Color 4#A0A0A0

Color 5#CCCCCC

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

5.2:1AA

8.5:1AAA

1.7:1Fail

1.8:1Fail

3.1:1AA18

5:1AA

2.9:1Fail

1.8:1Fail

2.9:1Fail

5.2:1AA

3.1:1AA18

1.8:1Fail

1.6:1Fail

8.5:1AAA

5:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Volcanic Glass Veins

Volcanic Glass Veins

See it in context.

Ready when you are.

Built with Volcanic Glass Veins.

How to use Volcanic Glass Veins

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Base Structure

Text & UI Elements

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Volcanic Glass Veins