Palette

Black Shard Reflection

A sophisticated palette capturing the deep, reflective qualities of obsidian and polished dark surfaces.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Black Shard Reflection 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 Black Shard Reflection.

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

Data visualization

#000000#1C1C1C#36454F#5D6D7E#808080

Palette guide

How to use Black Shard Reflection

Overview

The Black Shard Reflection palette is a sophisticated collection that captures the deep, reflective qualities of obsidian and polished dark surfaces. Comprising true black #000000, deep greys like #1C1C1C and #36454F (DarkSlateGray), and lighter, cool greys such as #5D6D7E and #808080 (Gray), it offers a modern, minimalist aesthetic. This palette is ideal for designers aiming to create elegant, sleek, and refined visuals that convey professionalism and luxury. Its monochromatic base with subtle cool undertones provides a versatile foundation for high-end design projects.

Best used for

Luxury tech branding and websites
Minimalist user interface design
Architectural visualization and portfolios
Modern art gallery displays
High-end product design and packaging
Corporate presentations and reports

Suggested color roles

primary

Use #000000 as the absolute black, providing a strong, foundational anchor for backgrounds or dominant elements.

secondary

Employ #1C1C1C for slightly softer dark panels or content areas, maintaining depth while adding subtle variation.

accent

Apply #5D6D7E for cool, reflective highlights, subtle interactive elements, or modern graphic accents, adding refinement.

background

Choose #000000 or #1C1C1C for a sleek, dark mode interface, enhancing focus and sophistication.

text

For optimal readability on dark backgrounds, use #808080 for body text and crisp white for headings or key information.

Accessibility notes

Crucially, ensure text has sufficient contrast against dark backgrounds; #808080 on #000000 is a good starting point.
Avoid using #36454F for small text on #1C1C1C; ensure adequate luminance contrast for readability.
Provide clear focus states for interactive elements, as subtle grey changes might be missed by some users.
Use larger font sizes for lighter grey text on darker backgrounds to improve legibility.

Recommended combinations

Obsidian Depth

Creates a gradual dark transition, perfect for immersive backgrounds or layered UI elements.

#000000 · #1C1C1C · #36454F

Polished Surface

Offers a reflective UI aesthetic, ideal for subtle highlights and interactive states in a modern interface.

#1C1C1C · #5D6D7E · #808080

Sleek Contrast

Provides a clear and modern typography pairing, suitable for professional branding.

#000000 · #808080 · #36454F

CSS variables

:root {
  --black-shard-reflection-1: #000000;
  --black-shard-reflection-2: #1C1C1C;
  --black-shard-reflection-3: #36454F;
  --black-shard-reflection-4: #5D6D7E;
  --black-shard-reflection-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "black-shard-reflection": {
        1: "#000000",
        2: "#1C1C1C",
        3: "#36454F",
        4: "#5D6D7E",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#1C1C1C

Color 3#36454F

Color 4#5D6D7E

Color 5#808080

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

4:1AA18

5.3:1AA

1.2:1Fail

1.7:1Fail

3.2:1AA18

4.3:1AA18

2.1:1Fail

1.7:1Fail

1.9:1Fail

2.5:1Fail

4:1AA18

3.2:1AA18

1.9:1Fail

1.3:1Fail

5.3:1AA

4.3:1AA18

2.5:1Fail

1.3:1Fail

Similar palettes

More like Black Shard Reflection

View all dark

Charcoal Depths

Industrial Noir Canvas