Back to palettes

Palette

Dark Matter Swirl

A profound gradient of dark grays to near black, swirling like unseen forces in the depths of the universe.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dark Matter Swirl 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 Dark Matter Swirl.

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

Data visualization

#0C0C0C#1E1E1E#303030#424242#545454

Palette guide

How to use Dark Matter Swirl

Overview

The Dark Matter Swirl palette offers a profound and sophisticated gradient of dark grays, evoking the unseen forces and swirling depths of the universe. From the near-black #0C0C0C to the mid-tone #545454, this monochromatic palette is perfect for designs that require a minimalist, elegant, and mysterious aesthetic. It's an excellent choice for modern interfaces, luxury branding, or any project that aims for a sleek and grounded feel. Designers can use its consistent depth for immersive backgrounds, while developers will find it ideal for creating dark mode themes that are both visually rich and incredibly versatile across various elements.

Best used for

  • Minimalist website designs
  • Luxury brand identity (e.g., high-end electronics)
  • Dark mode UI for creative or professional software
  • Abstract art or photography portfolios
  • Cinematic titles or promotional materials
  • High-tech product showcases

Suggested color roles

primary

#1E1E1E - A deep charcoal gray that provides a strong, neutral foundation for primary elements, large sections, or brand identity.

secondary

#303030 - A balanced dark gray, ideal for secondary content blocks, navigation, or as a subtle contrasting panel.

accent

#545454 - The lightest shade, a mid-tone gray, perfect for subtle highlights, interactive states, or delicate graphical details that need to stand out without being too bright.

background

#0C0C0C - A very dark, almost black gray, offering a profound, immersive background that enhances the mysterious feel of the palette.

text

#424242 - A dark gray that can be used for subtle, de-emphasized text. For main body text on dark backgrounds, use a very light gray (e.g., #E0E0E0) for optimal readability.

Accessibility notes

  • Ensure sufficient contrast when using #545454 for text on darker backgrounds like #0C0C0C or #1E1E1E.
  • Avoid using #424242 for primary text on #303030; contrast will be insufficient.
  • For critical text on the darkest backgrounds, opt for a pure white or very light gray to meet accessibility standards.
  • Monochromatic dark palettes require careful contrast checking for all text and interactive elements.

Recommended combinations

Deep Monochrome

Creating seamless, deep gray gradients for backgrounds or layered UI elements, adding subtle depth.

#0C0C0C · #1E1E1E · #303030

Subtle Contrast

Pairing a dominant dark gray with a lighter accent and a legible mid-tone gray for cards or feature blocks.

#1E1E1E · #545454 · #424242

Layered Swirl

Designing UI elements where subtle tonal shifts provide hierarchy without stark contrast, ideal for dashboards.

#303030 · #424242 · #545454

CSS variables

:root {
  --dark-matter-swirl-1: #0C0C0C;
  --dark-matter-swirl-2: #1E1E1E;
  --dark-matter-swirl-3: #303030;
  --dark-matter-swirl-4: #424242;
  --dark-matter-swirl-5: #545454;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-matter-swirl": {
        1: "#0C0C0C",
        2: "#1E1E1E",
        3: "#303030",
        4: "#424242",
        5: "#545454",
      }
    }
  }
}

Related searches

dark gray monochrome paletteminimalist black white colorssophisticated dark themecosmic gray hex codessleek dark UI design

Palette colors

Hex values

Color 1#0C0C0C
·
Color 2#1E1E1E
·
Color 3#303030
·
Color 4#424242
·
Color 5#545454
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.6:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
1.9:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.6:1Fail
2.2:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Dark Matter Swirl

View all dark
Celestial Dust Swirl
Cosmic Abyss Echo
Cosmic Deep Slumber
Cosmic Dust Bloom
Cosmic Stardust Drift
Dark Matter Shroud