Back to palettes

Palette

Volcanic Glass Beach

Sleek and stark, reflecting the smooth, dark sheen of volcanic glass pebbles on a black sand beach.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0F0F#2A2A2A#4D4D4D#707070#969696

Palette guide

How to use Volcanic Glass Beach

Overview

The Volcanic Glass Beach palette offers a sleek and stark monochromatic range, reflecting the smooth, dark sheen of volcanic glass pebbles on a black sand beach. From a deep #0F0F0F to a lighter #969696, this gradient is perfect for creating minimalist, sophisticated, and modern designs. Developers can use the distinct steps for clear visual hierarchy in UI elements, while designers will find its understated elegance ideal for luxury branding, tech interfaces, or any project requiring a clean, refined aesthetic with a subtle, earthy depth.

Best used for

  • Minimalist website design
  • Luxury tech product interfaces
  • Architectural portfolio presentations
  • High-end fashion branding
  • Dark mode application themes
  • Photography website layouts

Suggested color roles

primary

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

secondary

#2A2A2A - A rich dark grey, excellent for subheadings, card backgrounds, or subtle dividing lines.

accent

#969696 - The lightest grey, perfect for subtle highlights, disabled states, or secondary text that needs to recede slightly.

background

#0F0F0F - Provides a sophisticated, deep canvas, creating an immersive experience.

text

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

Accessibility notes

  • Ensure #707070 or #969696 text has sufficient contrast against #0F0F0F or #2A2A2A for readability.
  • Avoid using adjacent dark greys like #0F0F0F and #2A2A2A for text/background pairings.
  • For primary body text, white or a very light grey is recommended over the darkest hues.
  • Check for sufficient contrast between interactive elements and their background states.

Recommended combinations

Obsidian Depth

Creates a smooth, dark gradient for backgrounds, headers, or modal overlays.

#0F0F0F · #2A2A2A · #4D4D4D

Glass Sheen

Ideal for subtle highlights, typography, or UI elements that require a refined, almost metallic look.

#0F0F0F · #707070 · #969696

Pebble Texture

Excellent for creating a sense of layered depth or for subtle visual separation in content blocks.

#2A2A2A · #4D4D4D · #707070

CSS variables

:root {
  --volcanic-glass-beach-1: #0F0F0F;
  --volcanic-glass-beach-2: #2A2A2A;
  --volcanic-glass-beach-3: #4D4D4D;
  --volcanic-glass-beach-4: #707070;
  --volcanic-glass-beach-5: #969696;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-beach": {
        1: "#0F0F0F",
        2: "#2A2A2A",
        3: "#4D4D4D",
        4: "#707070",
        5: "#969696",
      }
    }
  }
}

Related searches

monochromatic grey palettedark minimalist colorsvolcanic stone aestheticsleek black and greymodern dark theme

Palette colors

Hex values

Color 1#0F0F0F
·
Color 2#2A2A2A
·
Color 3#4D4D4D
·
Color 4#707070
·
Color 5#969696
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.3:1Fail
3.9:1AA18
6.5:1AA
2
1.3:1Fail
1.7:1Fail
2.9:1Fail
4.9:1AA
3
2.3:1Fail
1.7:1Fail
1.7:1Fail
2.9:1Fail
4
3.9:1AA18
2.9:1Fail
1.7:1Fail
1.7:1Fail
5
6.5:1AA
4.9:1AA
2.9:1Fail
1.7:1Fail

Similar palettes

More like Volcanic Glass Beach

View all monochrome
Ancient Volcanic Ash
Basalt Stream Pebble
Beach Stone Sketch
Calm Stone Meditate
Charcoal Graphite Tones
Charcoal River Stone