Back to palettes

Palette

Shadowed Obsidian

A deep, sophisticated grayscale from inky black to muted gray, inspired by volcanic glass and stark shadows.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#1C1C1C#3A3A3A#5F5F5F#858585

Palette guide

How to use Shadowed Obsidian

Overview

The Shadowed Obsidian palette is a masterclass in monochrome sophistication, moving from the inky depths of #0A0A0A to the softer tones of #858585. This grayscale collection, inspired by volcanic glass, offers designers and developers a versatile foundation for minimalist and luxurious projects. With deep greys like #1C1C1C and #3A3A3A providing structural depth, and #5F5F5F offering a subtle mid-tone, the palette creates an inherently elegant and modern feel. It's perfectly suited for applications where understated power and sleek aesthetics are paramount, ensuring a cohesive and visually refined user experience across various platforms.

Best used for

  • Minimalist user interface design
  • Sophisticated dark mode themes
  • Luxury tech branding and websites
  • Architectural portfolios and presentations
  • Photography and art gallery platforms
  • Modern editorial layouts

Suggested color roles

primary

Use #0A0A0A as the deepest, foundational black for backgrounds or main containers, setting a rich, intense tone.

secondary

Employ #1C1C1C for major sections, cards, or borders, providing a distinct separation from the primary dark while maintaining depth.

accent

Apply #5F5F5F for subtle highlights, interactive elements, or icon details, offering a gentle contrast without breaking the monochrome theme.

background

Utilize #1C1C1C or #3A3A3A as primary background colors for content areas, offering a softer dark base than pure black.

text

Pair #858585 with the darker shades like #0A0A0A and #1C1C1C for excellent readability, or use a pure white for maximum contrast.

Accessibility notes

  • Text using #5F5F5F on #1C1C1C or #3A3A3A will require careful contrast checking for readability, especially for small fonts.
  • Prioritize #858585 or pure white text on darker backgrounds like #0A0A0A and #1C1C1C to meet WCAG AA/AAA standards.
  • Avoid using adjacent shades like #1C1C1C and #3A3A3A for text and background without significant size or weight differences.
  • Ensure interactive elements (buttons, links) have sufficient contrast and visual feedback to indicate their functionality.

Recommended combinations

Deep Contrast

Ideal for main headings, body text on a dark background, and secondary graphical elements for a sleek look.

#0A0A0A · #858585 · #3A3A3A

Layered Depth

Excellent for creating distinct cards, section dividers, or subtle gradients that add dimension to the UI.

#1C1C1C · #3A3A3A · #5F5F5F

Subtle Highlight

Use the darkest tone for the base, #5F5F5F for interactive states, and #858585 for icons or decorative accents.

#0A0A0A · #5F5F5F · #858585

CSS variables

:root {
  --shadowed-obsidian-1: #0A0A0A;
  --shadowed-obsidian-2: #1C1C1C;
  --shadowed-obsidian-3: #3A3A3A;
  --shadowed-obsidian-4: #5F5F5F;
  --shadowed-obsidian-5: #858585;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-obsidian": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#3A3A3A",
        4: "#5F5F5F",
        5: "#858585",
      }
    }
  }
}

Related searches

dark monochrome paletteminimalist grey color schemeobsidian black designluxury dark mode colorssophisticated grayscale UI

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#3A3A3A
·
Color 4#5F5F5F
·
Color 5#858585
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
3.1:1AA18
5.4:1AA
2
1.2:1Fail
1.5:1Fail
2.7:1Fail
4.6:1AA
3
1.7:1Fail
1.5:1Fail
1.8:1Fail
3.1:1AA18
4
3.1:1AA18
2.7:1Fail
1.8:1Fail
1.7:1Fail
5
5.4:1AA
4.6:1AA
3.1:1AA18
1.7:1Fail

Similar palettes

More like Shadowed Obsidian

View all monochrome
Licorice Drop
Midnight Ink Spill
Noir Film Shadows
Obsidian Shard Coast
Volcanic Glass Shards
Volcanic Obsidian Flow