Back to palettes

Palette

Volcanic Glass Flow

Reflecting the cooled, sharp beauty of volcanic rock formations and obsidian glass.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#0F0F0F#4A4A4A#9C1A00#5E5D5D

Palette guide

How to use Volcanic Glass Flow

Overview

The Volcanic Glass Flow palette reflects the cooled, sharp beauty of volcanic rock formations and obsidian glass, punctuated by a striking ember. Dominated by deep, dark greys like #0F0F0F, #2C2C2C, and #4A4A4A, it introduces a powerful, contrasting #9C1A00 to represent molten heat. This palette is excellent for projects requiring a strong, natural, and slightly dramatic aesthetic. Designers can leverage the deep greys for sophisticated backgrounds, while developers can use the vibrant red-orange for critical alerts or interactive elements, ensuring visual impact.

Best used for

  • Industrial design concepts
  • Dark-themed tech websites
  • Luxury watch or jewelry branding
  • Art gallery digital presentations
  • High-end automotive interfaces
  • Geological exploration company branding

Suggested color roles

primary

#0F0F0F - The deepest black, ideal for main backgrounds, strong headers, or foundational elements in a stark design.

secondary

#2C2C2C - A dark charcoal, excellent for subheadings, borders, or secondary content blocks.

accent

#9C1A00 - A bold, deep red-orange, perfect for calls-to-action, warnings, or key interactive elements that need to pop.

background

#0F0F0F - Provides a strong, dark, and sophisticated canvas, highlighting the fiery accent.

text

#5E5D5D - A mid-grey suitable for body text on the darkest backgrounds, or use white for primary readability.

Accessibility notes

  • Ensure #5E5D5D or white text has sufficient contrast against #0F0F0F, #2C2C2C, and #4A4A4A.
  • The #9C1A00 accent must have strong contrast when used for text on any dark grey background.
  • Avoid placing text in #2C2C2C on #0F0F0F due to insufficient contrast for small text.
  • Test all interactive elements for clear visual feedback and contrast.

Recommended combinations

Obsidian Core

Creates a sleek, dark gradient for backgrounds, headers, or sophisticated UI elements.

#0F0F0F · #2C2C2C · #4A4A4A

Ember Spark

Ideal for high-impact calls-to-action or critical alerts against a deep black background.

#0F0F0F · #9C1A00 · #5E5D5D

Rock & Flow

Excellent for data visualizations, progress indicators, or highlighting key information on a dark base.

#2C2C2C · #5E5D5D · #9C1A00

CSS variables

:root {
  --volcanic-glass-flow-1: #2C2C2C;
  --volcanic-glass-flow-2: #0F0F0F;
  --volcanic-glass-flow-3: #4A4A4A;
  --volcanic-glass-flow-4: #9C1A00;
  --volcanic-glass-flow-5: #5E5D5D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-flow": {
        1: "#2C2C2C",
        2: "#0F0F0F",
        3: "#4A4A4A",
        4: "#9C1A00",
        5: "#5E5D5D",
      }
    }
  }
}

Related searches

dark rock color paletteobsidian red accentstrong natural colorsmonochrome with popvolcanic dark theme

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#0F0F0F
·
Color 3#4A4A4A
·
Color 4#9C1A00
·
Color 5#5E5D5D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
1.7:1Fail
2.1:1Fail
2
1.4:1Fail
2.2:1Fail
2.3:1Fail
2.9:1Fail
3
1.6:1Fail
2.2:1Fail
1.1:1Fail
1.4:1Fail
4
1.7:1Fail
2.3:1Fail
1.1:1Fail
1.2:1Fail
5
2.1:1Fail
2.9:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Volcanic Glass Flow

View all dark
Obsidian Mountain Peak
Obsidian Shard Grey
Abyssal Reef Mystery
Ancient Forest Depths
Asteroid Drift Grey
Basalt Edge