Palette

Cosmic Void Depths

Explores the profound darkness of interstellar space, punctuated by subtle glimmers of cosmic dust and distant galaxies.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Void Depths 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 Cosmic Void Depths.

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

Data visualization

#000000#1c1c1c#36454f#696969#a9a9a9

Palette guide

How to use Cosmic Void Depths

Overview

The Cosmic Void Depths palette explores the profound darkness of interstellar space, punctuated by subtle glimmers of cosmic dust. It features true #000000 black, a deep #1c1c1c charcoal, and the sophisticated #36454f (Charcoal). Lighter shades of #696969 (Dim Gray) and #a9a9a9 (Dark Gray) provide a sense of distance and texture, mimicking celestial dust. This monochromatic palette is perfect for minimalist designs, high-tech interfaces, or any project requiring a serious, sophisticated, and infinitely deep aesthetic, allowing content to truly stand out.

Best used for

Minimalist website and app design
High-tech branding and product showcases
Dark mode UI/UX for developers
Photography portfolios with dramatic contrast
Architectural visualization and design
Luxury lifestyle applications

Suggested color roles

primary

Use #000000 as the foundational background for absolute depth and maximum contrast with lighter elements.

secondary

Apply #1c1c1c for secondary backgrounds, panels, or subtle divisions, creating depth without stark contrast.

accent

Utilize #a9a9a9 for subtle accents, highlights, or interactive elements that need to be perceived but not overwhelm.

background

The true #000000 and #1c1c1c serve as excellent deep, immersive backdrops.

text

For primary text, use #a9a9a9 or #696969 against the darker backgrounds. For headings, a crisp white is highly effective.

Accessibility notes

Ensure #a9a9a9 and #696969 text has sufficient contrast against #000000, #1c1c1c, and #36454f backgrounds.
Avoid using #36454f text on #1c1c1c backgrounds for body text as contrast will be very low.
When using multiple shades of gray, ensure enough visual distinction for users with low vision.
Prioritize higher contrast for essential text and interactive elements to meet accessibility standards.

Recommended combinations

Void UI

Creates a stark, minimalist dark mode UI with true black, subtle dark gray, and legible light gray text.

#000000 · #1C1C1C · #A9A9A9

Shadowed Layers

Ideal for creating depth and hierarchy in panels or content blocks with subtle, graduated shades of gray.

#1C1C1C · #36454F · #696969

Cosmic Dust

Perfect for backgrounds with subtle texture or overlays, offering a sense of depth with shimmering light gray elements.

#000000 · #696969 · #A9A9A9

CSS variables

:root {
  --cosmic-void-depths-1: #000000;
  --cosmic-void-depths-2: #1c1c1c;
  --cosmic-void-depths-3: #36454f;
  --cosmic-void-depths-4: #696969;
  --cosmic-void-depths-5: #a9a9a9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-void-depths": {
        1: "#000000",
        2: "#1c1c1c",
        3: "#36454f",
        4: "#696969",
        5: "#a9a9a9",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#1c1c1c

Color 3#36454f

Color 4#696969

Color 5#a9a9a9

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

3.8:1AA18

8.9:1AAA

1.2:1Fail

1.7:1Fail

3.1:1AA18

7.3:1AAA

2.1:1Fail

1.7:1Fail

1.8:1Fail

4.2:1AA18

3.8:1AA18

3.1:1AA18

1.8:1Fail

2.3:1Fail

8.9:1AAA

7.3:1AAA

4.2:1AA18

2.3:1Fail

Similar palettes

More like Cosmic Void Depths

View all dark

Asteroid Belt Shadow

Midnight Stone Garden