Back to palettes

Palette

Dark Matter Shroud

A profoundly dark and mysterious palette, reflecting the enigmatic depths of dark matter.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#1C1C1C#2F4F4F#424242#5C4033

Palette guide

How to use Dark Matter Shroud

Overview

The Dark Matter Shroud palette is a profoundly dark and mysterious collection, reflecting the enigmatic depths of dark matter. It features a gradient of deep grays, from the absolute black #0A0A0A to the slightly lighter #424242, with a unique inclusion of the muted teal-gray #2F4F4F and the warm, earthy #5C4033. This palette is ideal for designs that require a sophisticated, grounded, and slightly industrial aesthetic. Designers can leverage its depth for dramatic backgrounds, while developers will find it excellent for dark mode interfaces that need a distinct, almost tangible quality. The subtle variations add unexpected richness to a dark theme.

Best used for

  • High-tech product websites with a rugged feel
  • Industrial design presentations
  • Dark mode UI for engineering or data analysis tools
  • Abstract art or architectural visualizations
  • Luxury watch or accessory branding
  • Sci-fi game environments or UI

Suggested color roles

primary

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

secondary

#2F4F4F - A rich, muted dark teal-gray, offering a sophisticated secondary color for navigation, accent panels, or important informational blocks.

accent

#5C4033 - A unique, earthy dark brown, perfect for subtle highlights, interactive states, or small illustrative details to add warmth and a distinctive character.

background

#0A0A0A - An absolute black, providing a profound, immersive background that enhances the mysterious feel and allows other colors to truly shine.

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 #5C4033 for text on darker backgrounds like #0A0A0A or #1C1C1C.
  • Avoid using #424242 for primary text on any of the darker grays; contrast will be insufficient.
  • For critical text on the darkest backgrounds, opt for a pure white or very light gray to meet accessibility standards.
  • The combination of #2F4F4F and #424242 might require careful contrast checking if used for text/background.

Recommended combinations

Void Layers

Creating seamless, deep gray gradients for backgrounds, adding subtle dimension.

#0A0A0A · #1C1C1C · #424242

Earthy Glint

Pairing a dark gray base with a warm brown accent and a muted teal for unique interactive elements.

#1C1C1C · #5C4033 · #2F4F4F

Shrouded Depths

Designing content blocks where a dark teal base transitions to gray with a warm brown highlight.

#2F4F4F · #424242 · #5C4033

CSS variables

:root {
  --dark-matter-shroud-1: #0A0A0A;
  --dark-matter-shroud-2: #1C1C1C;
  --dark-matter-shroud-3: #2F4F4F;
  --dark-matter-shroud-4: #424242;
  --dark-matter-shroud-5: #5C4033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dark-matter-shroud": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#2F4F4F",
        4: "#424242",
        5: "#5C4033",
      }
    }
  }
}

Related searches

dark gray brown palettemysterious black colorsindustrial dark themecosmic void hex codesmuted dark UI design

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#2F4F4F
·
Color 4#424242
·
Color 5#5C4033
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
2.2:1Fail
2:1Fail
2.1:1Fail
2
1.2:1Fail
1.9:1Fail
1.7:1Fail
1.8:1Fail
3
2.2:1Fail
1.9:1Fail
1.1:1Fail
1.1:1Fail
4
2:1Fail
1.7:1Fail
1.1:1Fail
1.1:1Fail
5
2.1:1Fail
1.8:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Dark Matter Shroud

View all dark