Back to palettes

Palette

Volcanic Obsidian Edge

A stark gradient of dark greys and blacks, evoking the sharp, smooth surface of obsidian.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Obsidian Edge 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 Obsidian Edge.

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

Data visualization

#0A0A0A#1C1C1C#2F2F2F#404040#555555

Palette guide

How to use Volcanic Obsidian Edge

Overview

The Volcanic Obsidian Edge palette (version 3) offers a stark gradient of deep greys and blacks, evoking the sharp, smooth surface of obsidian. This monochrome collection is perfect for creating minimalist, elegant, and powerful designs. Key colors range from the profound #0A0A0A to the versatile #555555, providing a robust foundation for any dark-themed project. Designers can leverage this palette to convey sophistication and strength, while developers will find it ideal for crafting sleek dark mode interfaces, luxury branding, or any application where a clean, uncluttered aesthetic is paramount. It's a timeless choice for modern digital experiences.

Best used for

  • Minimalist design and luxury branding
  • Dark mode interfaces and applications
  • Tech product design and corporate websites
  • Architectural visualization and photography portfolios
  • Sophisticated editorial layouts
  • High-end fashion and lifestyle brands

Suggested color roles

primary

Utilize #1C1C1C as a deep, foundational dark grey for primary content areas or main navigation.

secondary

Apply #2F2F2F for supporting dark grey elements, adding subtle depth and differentiation.

accent

Use #555555 as a lighter grey for subtle highlights, borders, or inactive states, providing visual interest.

background

Employ #0A0A0A as the purest black for dramatic depth in backgrounds.

text

For optimal readability on darker shades, use lighter greys like #555555 or #404040. White text offers maximum contrast.

Accessibility notes

  • Crucial to ensure sufficient contrast ratios (WCAG AA/AAA) for all text against backgrounds.
  • Avoid using very similar dark greys for text and background, especially for small font sizes.
  • Consider larger font sizes or bolder weights for critical information to enhance readability within the dark gradient.
  • Ensure interactive elements have clear focus states, perhaps using a light border or shadow.

Recommended combinations

Deep Gradient

Creates a seamless, dark gradient for backgrounds or layered elements, adding subtle depth.

#0A0A0A · #1C1C1C · #2F2F2F

Light Accent

Provides a clean contrast for UI elements, headings, or subtle interactive components.

#1C1C1C · #404040 · #555555

Monochrome Base

Offers a strong base with a clear progression for main content and secondary details.

#0A0A0A · #2F2F2F · #555555

CSS variables

:root {
  --volcanic-obsidian-edge-3-1: #0A0A0A;
  --volcanic-obsidian-edge-3-2: #1C1C1C;
  --volcanic-obsidian-edge-3-3: #2F2F2F;
  --volcanic-obsidian-edge-3-4: #404040;
  --volcanic-obsidian-edge-3-5: #555555;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-obsidian-edge-3": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#2F2F2F",
        4: "#404040",
        5: "#555555",
      }
    }
  }
}

Related searches

minimalist black grey palettedark mode color schemeobsidian monochromesophisticated dark themesleek neutral colors

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#2F2F2F
·
Color 4#404040
·
Color 5#555555
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.7:1Fail
2
1.2:1Fail
1.3:1Fail
1.6:1Fail
2.3:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.4:1Fail
5
2.7:1Fail
2.3:1Fail
1.8:1Fail
1.4:1Fail

Similar palettes

More like Volcanic Obsidian Edge

View all dark
Cosmic Void Depths
Deep Volcanic Glass
Midnight Stone Garden
Obsidian Flow Edge
Obsidian Shard Glimmer
Urban Industrial Grit