Palette

Volcanic Obsidian Edge

Sharp, intense blacks and dark greys, reflecting the raw, unyielding nature of volcanic obsidian.

MonochromeDark5 colors

More Monochrome 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

#1A1A1A#333333#5C5C5C#858585#0A0A0A

Palette guide

How to use Volcanic Obsidian Edge

Overview

The Volcanic Obsidian Edge palette offers sharp, intense blacks and dark greys, reflecting the raw, unyielding nature of volcanic obsidian. This collection provides a strong, minimalist foundation for designs that require sophistication, strength, and clarity. Key colors include the profound #0A0A0A, the versatile #333333, and the lighter #858585, offering a broader range compared to pure monochrome. Designers can leverage this palette for modern tech interfaces or luxury branding, while developers will find these hues ideal for creating sleek, high-contrast dark mode experiences. It's a powerful choice for projects demanding a precise and impactful visual statement.

Best used for

Modern tech interfaces and software applications
Luxury branding and high-end product design
Photography portfolios and art galleries
Minimalist websites and digital publications
Architectural studies and urban design concepts
Strong corporate identity and professional tools

Suggested color roles

primary

Utilize #1A1A1A as a deep, strong base for primary content areas or main structural elements.

secondary

Apply #333333 for supporting dark tones, providing depth and distinction in content blocks.

accent

Use #858585 as the brightest grey for subtle highlights, borders, or inactive states, adding visual finesse.

background

Employ #0A0A0A as the deepest black for dramatic backdrops and foundational layers.

text

For dark backgrounds, use lighter greys like #858585 or #5C5C5C for readability. White text offers maximum contrast on the darkest tones.

Accessibility notes

Ensure adequate contrast between text and background, especially for #5C5C5C on #333333.
Avoid using #1A1A1A and #0A0A0A as text and background together, as contrast will be insufficient.
Test all color pairings for WCAG AA compliance, paying close attention to small text and interactive elements.
Consider using a slightly bolder font weight for text on mid-tone greys to enhance legibility.

Recommended combinations

Deep Contrast

Creates a strong contrast for primary content, from deep background to subtle highlights.

#0A0A0A · #333333 · #858585

Layered Grey

Offers a smooth progression of dark greys for layered elements or content sections.

#1A1A1A · #333333 · #5C5C5C

Highlight Detail

Provides a clean, modern look with a dark base and clear, brighter accents for details.

#1A1A1A · #5C5C5C · #858585

CSS variables

:root {
  --volcanic-obsidian-edge-1: #1A1A1A;
  --volcanic-obsidian-edge-2: #333333;
  --volcanic-obsidian-edge-3: #5C5C5C;
  --volcanic-obsidian-edge-4: #858585;
  --volcanic-obsidian-edge-5: #0A0A0A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-obsidian-edge": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#5C5C5C",
        4: "#858585",
        5: "#0A0A0A",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#5C5C5C

Color 4#858585

Color 5#0A0A0A

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

4.7:1AA

1.1:1Fail

1.4:1Fail

1.9:1Fail

3.4:1AA18

1.6:1Fail

2.6:1Fail

1.9:1Fail

1.8:1Fail

3:1Fail

4.7:1AA

3.4:1AA18

1.8:1Fail

5.4:1AA

1.1:1Fail

1.6:1Fail

3:1Fail

5.4:1AA

Similar palettes

More like Volcanic Obsidian Edge