Back to palettes

Palette

Obsidian Nightfall Depth

Intense blacks and deep grays capture the impenetrable mystery of a moonless night.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#1C1C1C#333333#000000#222222

Palette guide

How to use Obsidian Nightfall Depth

Overview

Obsidian Nightfall Depth captures the impenetrable mystery of a moonless night through intense blacks and deep grays. This palette features true black (#000000) alongside extremely dark grays like #0A0A0A, #1C1C1C, #222222, and #333333. It is designed for maximum immersion and dramatic impact, perfect for creating luxurious, minimalist, or mysterious digital environments. The subtle variations in near-black provide just enough distinction for UI elements without detracting from the overall profound darkness, offering a truly 'blackout' aesthetic.

Best used for

  • Dramatic website backgrounds
  • Luxury product photography showcases
  • Minimalist art installations
  • Secure application interfaces
  • Immersive digital experiences
  • High-end fashion branding

Suggested color roles

primary

Utilize #000000 as the ultimate background to create a sense of infinite depth and drama.

secondary

Employ #0A0A0A or #1C1C1C for subtle layering, such as card backgrounds or modal dialogs, providing slight visual separation.

accent

Apply #333333 for subtle interactive elements, borders, or delicate highlights, ensuring minimal disruption to the dark theme.

background

The deepest black, #000000, is paramount for achieving the intended 'nightfall depth' effect.

text

For primary text, #333333 offers the most legible contrast on pure black, while a very light gray or white can be sparingly used for headlines.

Accessibility notes

  • It is critical to ensure text contrast for #333333 on #000000 meets WCAG AA standards for readability, especially for body text.
  • Avoid using small font sizes for any text, as the subtle contrast can make it difficult to read.
  • Interactive elements must have clear focus states that are easily visible against the darkest backgrounds.
  • Test on various displays and lighting conditions, as very dark palettes can lose definition on lower-quality screens.

Recommended combinations

Infinite Black

For a pure black canvas with a subtle off-black layer and clearly readable medium-dark gray text.

#000000 · #0A0A0A · #333333

Layered Darkness

Ideal for creating depth through slight variations in dark tones for different UI components or content blocks.

#0A0A0A · #1C1C1C · #222222

Subtle Interaction

Use for a deep background with a slightly lighter shade for interactive elements and a mid-dark gray for labels or icons.

#000000 · #222222 · #333333

CSS variables

:root {
  --obsidian-nightfall-depth-1: #0A0A0A;
  --obsidian-nightfall-depth-2: #1C1C1C;
  --obsidian-nightfall-depth-3: #333333;
  --obsidian-nightfall-depth-4: #000000;
  --obsidian-nightfall-depth-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-nightfall-depth": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#333333",
        4: "#000000",
        5: "#222222",
      }
    }
  }
}

Related searches

deep black color palettemysterious dark themeimmersive UI colorsluxury dark backgroundpure black web design

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#333333
·
Color 4#000000
·
Color 5#222222
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
1.1:1Fail
1.2:1Fail
2
1.2:1Fail
1.3:1Fail
1.2:1Fail
1.1:1Fail
3
1.6:1Fail
1.3:1Fail
1.7:1Fail
1.3:1Fail
4
1.1:1Fail
1.2:1Fail
1.7:1Fail
1.3:1Fail
5
1.2:1Fail
1.1:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Obsidian Nightfall Depth

View all dark
Midnight Raven Glare
Raven Feather Shroud
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Deep Current