Back to palettes

Palette

Obsidian Night Sky

The impenetrable darkness of a starlit, moonless night reflected in volcanic rock.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#333333#0F0F0F#4C4C4C#262626

Palette guide

How to use Obsidian Night Sky

Overview

The Obsidian Night Sky palette captures the impenetrable darkness of a starlit, moonless night reflected in volcanic rock, offering a blend of deep, mysterious grays and near-blacks. Shades like #0F0F0F and #1A1A1A establish a profound, elegant base, while #262626, #333333, and #4C4C4C provide subtle gradations for depth and hierarchy. This palette is perfect for designers seeking to evoke sophistication, mystery, and a premium feel, making it versatile for both luxurious branding and immersive digital experiences.

Best used for

  • Elegant web interfaces
  • Luxury brand identity
  • Sophisticated editorial design
  • Night mode applications
  • Fine art platforms
  • High-end product display

Suggested color roles

primary

Set #0F0F0F as the core background or primary container color to establish a deep, elegant foundation.

secondary

Use #1A1A1A or #262626 for secondary panels, card backgrounds, or subtle sectional divisions.

accent

Apply #4C4C4C for interactive elements, subtle highlights, or demarcation lines, offering gentle contrast.

background

The deepest shades, #0F0F0F or #1A1A1A, are ideal for creating an immersive, dark backdrop.

text

For body text, #4C4C4C provides excellent readability on the darker backgrounds, while #333333 can be used for secondary text.

Accessibility notes

  • Ensure text contrast for #4C4C4C on #0F0F0F meets WCAG AA standards, especially for smaller text.
  • Avoid using the darkest grays for primary text on similar dark backgrounds; always provide sufficient luminance contrast.
  • Provide clear visual cues for interactive elements, as the subtle color differences might be hard to perceive.
  • Consider larger font sizes or increased line-height for optimal readability in this low-light context.

Recommended combinations

Deep Harmony

For a harmonious dark theme with a deep background, slightly lighter content areas, and readable text.

#0F0F0F · #1A1A1A · #4C4C4C

Subtle Gradation

Ideal for layering UI elements, creating depth through subtle shifts in near-black tones, such as cards on a background.

#1A1A1A · #262626 · #333333

Text Clarity

Use for a very dark base with a mid-tone gray for primary text and a slightly lighter gray for headlines or key information.

#0F0F0F · #333333 · #4C4C4C

CSS variables

:root {
  --obsidian-night-sky-1: #1A1A1A;
  --obsidian-night-sky-2: #333333;
  --obsidian-night-sky-3: #0F0F0F;
  --obsidian-night-sky-4: #4C4C4C;
  --obsidian-night-sky-5: #262626;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-night-sky": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#0F0F0F",
        4: "#4C4C4C",
        5: "#262626",
      }
    }
  }
}

Related searches

mysterious dark paletteelegant black colorssophisticated grey schemenight sky design elementsdark monochrome UI

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#0F0F0F
·
Color 4#4C4C4C
·
Color 5#262626
·

Accessibility

Contrast checker

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

Similar palettes

More like Obsidian Night Sky

View all monochrome
Noir Film Shadows
Obsidian Monolith Shadow
Shadowed Obsidian
Volcanic Glass Shards
Winter Gloom
Basalt Pillar Shades