Back to palettes

Palette

Obsidian Night Gaze

A stark, minimalist interpretation of obsidian's reflective surface under a moonless, infinite night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#1A1A1A#2C2C2C#4A4A4A#6A6A6A

Palette guide

How to use Obsidian Night Gaze

Overview

Obsidian Night Gaze offers a stark, minimalist interpretation of obsidian's reflective surface under a moonless, infinite night sky. This palette leans into true black (#000000) and deep off-blacks like #1A1A1A and #2C2C2C, providing an unparalleled sense of depth and sophistication. The lighter grays, #4A4A4A and #6A6A6A, are perfect for creating legible text and subtle UI elements, ensuring a high-contrast experience that feels both modern and luxurious. It's an excellent choice for designs aiming for dramatic impact and extreme clarity.

Best used for

  • High-contrast user interfaces
  • Luxury product showcases
  • Cinematic web design
  • Photography portfolios
  • Art gallery websites
  • Minimalist branding

Suggested color roles

primary

Utilize #000000 as the foundational canvas for maximum dramatic effect and depth.

secondary

Employ #1A1A1A for secondary panels, modal overlays, or subtle texture, providing slight variation from pure black.

accent

Apply #4A4A4A for interactive elements, icons, or subtle highlights, offering clear visibility against darker shades.

background

The deepest black, #000000, is the perfect background for an immersive and stark visual experience.

text

For primary text, #6A6A6A provides excellent contrast and readability on the darkest backgrounds, while #4A4A4A can be used for secondary text.

Accessibility notes

  • Due to extreme dark backgrounds, ensure all text and interactive elements have a very high contrast ratio (preferably AAA).
  • Avoid using small font sizes for text, particularly with #4A4A4A on #000000, as readability can be challenging.
  • Provide ample whitespace to prevent visual fatigue in high-contrast environments.
  • Test interactive states thoroughly to ensure they are clearly discernible against the dark backdrop.

Recommended combinations

Pure Depth

For a pure black background, subtle off-black containers, and highly readable light gray text.

#000000 · #1A1A1A · #6A6A6A

Layered Dark

Use for layered UI elements, where #1A1A1A is the base, #2C2C2C for cards, and #4A4A4A for headlines.

#1A1A1A · #2C2C2C · #4A4A4A

Accent Contrast

Ideal for a pure black canvas with a slightly lighter gray for critical UI elements and a brighter gray for body text.

#000000 · #4A4A4A · #6A6A6A

CSS variables

:root {
  --obsidian-night-gaze-1: #000000;
  --obsidian-night-gaze-2: #1A1A1A;
  --obsidian-night-gaze-3: #2C2C2C;
  --obsidian-night-gaze-4: #4A4A4A;
  --obsidian-night-gaze-5: #6A6A6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-night-gaze": {
        1: "#000000",
        2: "#1A1A1A",
        3: "#2C2C2C",
        4: "#4A4A4A",
        5: "#6A6A6A",
      }
    }
  }
}

Related searches

pure black color schememinimalist dark UIhigh contrast web designluxury black palettesleek dark theme

Palette colors

Hex values

Color 1#000000
·
Color 2#1A1A1A
·
Color 3#2C2C2C
·
Color 4#4A4A4A
·
Color 5#6A6A6A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.4:1Fail
3.9:1AA18
2
1.2:1Fail
1.2:1Fail
2:1Fail
3.2:1AA18
3
1.5:1Fail
1.2:1Fail
1.6:1Fail
2.6:1Fail
4
2.4:1Fail
2:1Fail
1.6:1Fail
1.6:1Fail
5
3.9:1AA18
3.2:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Obsidian Night Gaze

View all dark
Midnight Stone Garden
Cosmic Void Depths
Deep Onyx Glaze
Obsidian Stone Forge
Raven Plumage Sheen
Volcanic Ash Glow