Back to palettes

Palette

Midnight Obsidian

Inky blacks and deep grays create a mysterious and powerful dark theme, perfect for strong contrasts.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D0D0D#1A1A1A#2C2C2C#3F3F3F#505050

Palette guide

How to use Midnight Obsidian

Overview

The Midnight Obsidian palette is a truly deep and powerful monochromatic collection, ranging from near-black to dark gray. Featuring #0D0D0D (deepest black), #1A1A1A (dark charcoal), #2C2C2C (medium dark gray), #3F3F3F (dark gray), and #505050 (medium gray), this palette is ideal for designers and developers seeking a sleek, mysterious, and high-contrast aesthetic. It excels at creating strong visual impact and a sense of modern sophistication, perfect for dark mode interfaces where clarity and depth are paramount. This palette provides a robust foundation for minimalist and powerful design statements.

Best used for

  • Minimalist websites and applications
  • Luxury tech product branding
  • High-contrast dark mode user interfaces (UI)
  • Security-related platforms or software
  • Sleek and modern digital art
  • Photography portfolios with a dramatic edge

Suggested color roles

primary

Use #1A1A1A as the main background or for dominant content areas, providing a solid, dark foundation.

secondary

Apply #2C2C2C for dividers, secondary panels, or subtle borders, offering a clear visual separation.

accent

Utilize #505050 sparingly for subtle highlights, interactive states, or icons, providing a clear yet understated accent.

background

Employ #0D0D0D as the deepest background color, creating an immersive, profound black canvas.

text

For primary text, #505050 or white offers excellent readability on darker backgrounds. For secondary text, #3F3F3F can be used with sufficient font weight.

Accessibility notes

  • Ensure #505050 has sufficient contrast when used for text on #0D0D0D or #1A1A1A backgrounds.
  • Avoid using #0D0D0D and #1A1A1A as text and background pairs due to insufficient contrast.
  • Consider larger font sizes for text elements that use #3F3F3F on darker backgrounds to improve readability.
  • Crucial to provide strong contrast for interactive elements against the deep, similar background tones.

Recommended combinations

Deep Black Base

A strong dark mode setup with #0D0D0D as background, #1A1A1A for content cards, and #505050 for primary text or icons.

#0D0D0D · #1A1A1A · #505050

Monochromatic Layers

Layered design using #1A1A1A for main panels, #2C2C2C for sub-sections, and #3F3F3F for secondary information or subtle UI.

#1A1A1A · #2C2C2C · #3F3F3F

Sleek Contrast

Employ #0D0D0D as background, #3F3F3F for body text, and #505050 for prominent headings or interactive elements.

#0D0D0D · #3F3F3F · #505050

CSS variables

:root {
  --midnight-obsidian-1: #0D0D0D;
  --midnight-obsidian-2: #1A1A1A;
  --midnight-obsidian-3: #2C2C2C;
  --midnight-obsidian-4: #3F3F3F;
  --midnight-obsidian-5: #505050;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-obsidian": {
        1: "#0D0D0D",
        2: "#1A1A1A",
        3: "#2C2C2C",
        4: "#3F3F3F",
        5: "#505050",
      }
    }
  }
}

Related searches

black and gray palettedark mode colorsminimalist black themesleek UI designobsidian color scheme

Palette colors

Hex values

Color 1#0D0D0D
·
Color 2#1A1A1A
·
Color 3#2C2C2C
·
Color 4#3F3F3F
·
Color 5#505050
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.8:1Fail
2.4:1Fail
2
1.1:1Fail
1.2:1Fail
1.7:1Fail
2.2:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
1.8:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.4:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Midnight Obsidian

View all dark
Ancient Forest Depths
Gothic Library Ink
Abyssal Reef Shadow
Abyssal Trench Mystery
Abyssal Trench Mystery
Abyssal Trench Mystery