Back to palettes

Palette

Obsidian Shard Grey

Inspired by the sharp, reflective surfaces of volcanic obsidian and dark geological formations.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4F4F4F#727272#969696#0A0A0A

Palette guide

How to use Obsidian Shard Grey

Overview

The Obsidian Shard Grey palette offers a sophisticated range of dark to mid-tone greys, reminiscent of volcanic rock and sharp geological formations. Anchored by the profound #0A0A0A and the slightly lighter #2C2C2C, this collection provides a strong, modern foundation for design. Mid-tones like #4F4F4F and #727272 introduce versatility, while #969696 offers a practical lighter grey for contrast. This palette is ideal for projects requiring a sense of strength, durability, and understated elegance, perfect for tech interfaces, industrial design, or minimalist branding. It evokes a timeless, solid aesthetic.

Best used for

  • Industrial design concepts
  • Tech startup branding
  • Dark mode applications
  • Architectural visualization
  • Automotive interface design
  • Monochrome photography layouts

Suggested color roles

primary

Use #0A0A0A for primary backgrounds or large, dominant sections to establish a deep, grounding presence.

secondary

Employ #2C2C2C for secondary panels, containers, or dividers, providing subtle separation from the primary dark.

accent

Utilize #969696 for interactive elements, highlights, or subtle graphic accents to provide necessary contrast and visual cues.

background

The deep #0A0A0A serves as an excellent canvas for dark themes, offering depth and sophistication.

text

For legible body text on darker backgrounds, #727272 or #969696 works well. For maximum contrast, use white or a very light grey.

Accessibility notes

  • Ensure #727272 or #969696 text has sufficient contrast against darker backgrounds like #0A0A0A or #2C2C2C.
  • Avoid using #4F4F4F text on #2C2C2C backgrounds for critical information due to low contrast.
  • Use #969696 for UI elements that require clear visibility and interactivity, especially on darker tones.
  • For headings and larger text, #727272 on #0A0A0A can be acceptable, but always verify WCAG AA/AAA compliance.

Recommended combinations

Deep Contrast

A robust combination for dark mode interfaces, using the lightest grey for prominent text or interactive elements.

#0A0A0A · #2C2C2C · #969696

Layered Depth

Creates subtle visual hierarchy for cards, panels, and content blocks within a dark theme.

#2C2C2C · #4F4F4F · #727272

Soft Highlight

Excellent for a dark background with mid-tone text and a lighter, more visible accent or heading.

#0A0A0A · #727272 · #969696

CSS variables

:root {
  --obsidian-shard-grey-1: #2C2C2C;
  --obsidian-shard-grey-2: #4F4F4F;
  --obsidian-shard-grey-3: #727272;
  --obsidian-shard-grey-4: #969696;
  --obsidian-shard-grey-5: #0A0A0A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-shard-grey": {
        1: "#2C2C2C",
        2: "#4F4F4F",
        3: "#727272",
        4: "#969696",
        5: "#0A0A0A",
      }
    }
  }
}

Related searches

dark stone color palettevolcanic rock colorsmonochrome grey schemeindustrial grey designsharp dark greys

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4F4F4F
·
Color 3#727272
·
Color 4#969696
·
Color 5#0A0A0A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
4.7:1AA
1.4:1Fail
2
1.7:1Fail
1.7:1Fail
2.8:1Fail
2.4:1Fail
3
2.9:1Fail
1.7:1Fail
1.6:1Fail
4.1:1AA18
4
4.7:1AA
2.8:1Fail
1.6:1Fail
6.7:1AA
5
1.4:1Fail
2.4:1Fail
4.1:1AA18
6.7:1AA

Similar palettes

More like Obsidian Shard Grey

View all dark
Basalt Ridge Shadow
Lava Rock Texture
Obsidian Mountain Peak
Volcanic Glass Flow
Volcanic Stone Grime
Abyssal Reef Mystery