Palette

Velveteen Shadow Play

Deep and enigmatic, playing with shadows and subtle tones reminiscent of dramatic black and white photography.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Velveteen Shadow Play 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 Velveteen Shadow Play.

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

Data visualization

#1A1A1A#333333#5C5C5C#858585#000000

Palette guide

How to use Velveteen Shadow Play

Overview

The Velveteen Shadow Play palette is a sophisticated monochrome collection, playing with deep shadows and subtle grey tones to evoke a dramatic and enigmatic mood. Ranging from the absolute depth of "#000000" to the lighter, yet still substantial, "#858585", it provides a versatile spectrum of greys. The mid-tones like "#1A1A1A", "#333333", and "#5C5C5C" offer excellent options for creating dimension and texture, reminiscent of classic black and white photography. This palette is perfect for designs that aim for a timeless, elegant, minimalist, or moody aesthetic, emphasizing form and contrast without color distractions.

Best used for

High-end photography websites
Minimalist branding and logos
Dark mode UI/UX design
Artistic portfolios or galleries
Architectural design presentations
Sophisticated editorial layouts

Suggested color roles

primary

"#333333" for dominant content areas, providing a strong yet soft background that is easy on the eyes in dark mode.

secondary

"#5C5C5C" for secondary information, borders, or subtle distinctions between content blocks, offering a gentle contrast.

accent

"#858585" used sparingly for hover states, subtle highlights, or delicate lines, adding a touch of luminosity without being bright.

background

"#000000" or "#1A1A1A" for a profound, immersive dark canvas that makes lighter elements pop with stark elegance.

text

Use a crisp white or very light grey for main body text on the darker shades; "#858585" can be used for secondary text on "#000000" or "#1A1A1A" if contrast is sufficient.

Accessibility notes

White or very light grey text is essential for readability against "#000000", "#1A1A1A", and "#333333".
Ensure that "#858585" (lightest grey) provides sufficient contrast when used as text on mid-tone greys like "#5C5C5C".
Avoid using "#1A1A1A" or "#333333" for text on "#000000", as contrast will be too low.
For small text, always prioritize high contrast, likely white or near-white on the darkest backgrounds.

Recommended combinations

Cinematic Depth

Creates a dramatic, layered effect, perfect for hero images or visual storytelling.

#000000 · #333333 · #5C5C5C

Subtle Grayscale

Ideal for gradients, subtle background textures, or defining hierarchy in a minimalist interface.

#1A1A1A · #5C5C5C · #858585

Sharp Contrast

Best for highlighting key information or interactive elements against a deep, sophisticated base.

#333333 · #858585 · #000000

CSS variables

:root {
  --velveteen-shadow-play-1: #1A1A1A;
  --velveteen-shadow-play-2: #333333;
  --velveteen-shadow-play-3: #5C5C5C;
  --velveteen-shadow-play-4: #858585;
  --velveteen-shadow-play-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velveteen-shadow-play": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#5C5C5C",
        4: "#858585",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#5C5C5C

Color 4#858585

Color 5#000000

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

4.7:1AA

1.2:1Fail

1.4:1Fail

1.9:1Fail

3.4:1AA18

1.7:1Fail

2.6:1Fail

1.9:1Fail

1.8:1Fail

3.1:1AA18

4.7:1AA

3.4:1AA18

1.8:1Fail

5.7:1AA

1.2:1Fail

1.7:1Fail

3.1:1AA18

5.7:1AA

Similar palettes

More like Velveteen Shadow Play

View all monochrome

Basalt Pillar Shades

Charcoal Smoke Hues

Gothic Cathedral Stone

Gothic Revival

Gothic Stone Hearth

Licorice Drop