Back to palettes

Palette

Volcanic Glass Spires

Sharp, deep grays and blacks capturing the raw, majestic forms of obsidian spires.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4A4A4A#686868#888888#A8A8A8

Palette guide

How to use Volcanic Glass Spires

Overview

The Volcanic Glass Spires palette offers a progressive monochrome gradient, evolving from deep charcoal #2C2C2C to light grey #A8A8A8. This collection provides designers and developers with exceptional versatility for crafting sophisticated dark themes and complex interfaces. The smooth transitions between #4A4A4A, #686868, and #888888 allow for intricate visual depth and clear hierarchical structuring, capturing the raw, majestic forms of obsidian spires. It's an excellent choice for projects requiring understated elegance, robust functionality, and a consistent, professional brand presence across various digital touchpoints.

Best used for

  • Professional portfolios and resumes
  • Luxury brand websites and digital products
  • High-tech product showcases
  • Architectural rendering presentations
  • Enterprise software interfaces
  • Educational platforms with a serious tone

Suggested color roles

primary

Use #2C2C2C as the main background or for dominant sections to establish a deep, grounding foundation.

secondary

Apply #4A4A4A for content areas, secondary panels, or to differentiate distinct information blocks.

accent

Utilize #888888 for interactive elements, subtle highlights, or icons that need to gently stand out.

background

Choose #2C2C2C for a solid, deep foundation that provides a sophisticated backdrop for content.

text

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

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing #686868 on #2C2C2C or #4A4A4A backgrounds.
  • Avoid using similar mid-tone greys for text and background to maintain readability.
  • 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

Deep Structure

Establishes a solid, dark base for backgrounds, main content, and structural elements.

#2C2C2C · #4A4A4A · #686868

Highlighting & Text

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

#4A4A4A · #888888 · #A8A8A8

Layered UI

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

#686868 · #888888 · #A8A8A8

CSS variables

:root {
  --volcanic-glass-spires-1: #2C2C2C;
  --volcanic-glass-spires-2: #4A4A4A;
  --volcanic-glass-spires-3: #686868;
  --volcanic-glass-spires-4: #888888;
  --volcanic-glass-spires-5: #A8A8A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-spires": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#686868",
        4: "#888888",
        5: "#A8A8A8",
      }
    }
  }
}

Related searches

dark grey gradientobsidian spires paletteprofessional monochromesophisticated dark themeUI grey scale

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#686868
·
Color 4#888888
·
Color 5#A8A8A8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
5.9:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
3.9:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.9:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like Volcanic Glass Spires

View all monochrome
Obsidian Shard Coast
Volcanic Ash Drift
Volcanic Cinder Trail
Volcanic Glass Shard
Volcanic Obsidian Flow
Basalt Column Grey