Palette

Obsidian Shard Glimmer

Deep, intense blacks and dark greys capture the sharp, reflective quality of obsidian shards gleaming in shadow.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Shard Glimmer 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 Obsidian Shard Glimmer.

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

Data visualization

#0F0F0F#222222#3A3A3A#525252#6F6F6F

Palette guide

How to use Obsidian Shard Glimmer

Overview

The Obsidian Shard Glimmer palette offers a sophisticated range of deep, intense blacks and dark greys, perfect for creating dramatic and luxurious digital experiences. With shades like the near-black #0F0F0F and the rich charcoal #222222, this collection captures the sharp, reflective quality of obsidian shards gleaming in shadow. Designers can leverage the subtle variations between #3A3A3A, #525252, and #6F6F6F to add depth and texture to minimalist interfaces, branding, or high-end product showcases. This palette is excellent for evoking a sense of mystery, elegance, and modern strength, providing a powerful foundation for striking visual design.

Best used for

Luxury brand websites and apps
High-tech product interfaces
Dark mode themes for software
Modern architectural visualizations
Minimalist photography portfolios
Dramatic event branding

Suggested color roles

primary

Use #0F0F0F as the dominant base for backgrounds or large sections, establishing a profound, dark foundation.

secondary

Employ #222222 for secondary elements, panels, or card backgrounds to add slight differentiation from the deepest black.

accent

Apply #6F6F6F for subtle highlights, interactive states, or small decorative elements to introduce a touch of light contrast.

background

The deepest #0F0F0F provides a sleek, modern dark canvas, creating an immersive user experience.

text

For body text, use #6F6F6F against #0F0F0F or #222222 for readability, or pure white for maximum contrast on dark backgrounds.

Accessibility notes

Ensure sufficient contrast for all text, especially lighter greys like #6F6F6F on darker backgrounds such as #0F0F0F.
Use a lighter grey, like #6F6F6F, for crucial UI elements and interactive states to meet WCAG guidelines.
Avoid using #222222 text on a #0F0F0F background for important information, as contrast will be too low.
Consider using pure white or a very light grey for primary text on the darkest backgrounds to ensure optimal readability.

Recommended combinations

Deep Foundation

Ideal for core UI elements: a dark background, a slightly lighter panel, and a visible accent.

#0F0F0F · #222222 · #6F6F6F

Subtle Depth

Excellent for creating layered effects or gradients within a dark theme, adding visual interest without harsh contrasts.

#222222 · #3A3A3A · #525252

Highlight Contrast

Perfect for a dark background with prominent, readable text or icons using the lighter greys.

#0F0F0F · #525252 · #6F6F6F

CSS variables

:root {
  --obsidian-shard-glimmer-1: #0F0F0F;
  --obsidian-shard-glimmer-2: #222222;
  --obsidian-shard-glimmer-3: #3A3A3A;
  --obsidian-shard-glimmer-4: #525252;
  --obsidian-shard-glimmer-5: #6F6F6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-shard-glimmer": {
        1: "#0F0F0F",
        2: "#222222",
        3: "#3A3A3A",
        4: "#525252",
        5: "#6F6F6F",
      }
    }
  }
}

Hex values

Color 1#0F0F0F

Color 2#222222

Color 3#3A3A3A

Color 4#525252

Color 5#6F6F6F

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

2.5:1Fail

3.8:1AA18

1.2:1Fail

1.4:1Fail

2:1Fail

3.2:1AA18

1.7:1Fail

1.4:1Fail

1.5:1Fail

2.3:1Fail

2.5:1Fail

2:1Fail

1.5:1Fail

1.6:1Fail

3.8:1AA18

3.2:1AA18

2.3:1Fail

1.6:1Fail

Similar palettes

More like Obsidian Shard Glimmer

View all dark

Cosmic Void Depths

Deep Volcanic Glass

Midnight Stone Garden

Obsidian Flow Edge

Volcanic Ash Glow

Volcanic Glass Shard