Palette

Twilight Shadow Path

A dramatic gradient of dark greys and charcoals, mapping a path through twilight shadows.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Shadow Path 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 Twilight Shadow Path.

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

Data visualization

#1C1C1C#3C3C3C#5C5C5C#7C7C7C#9C9C9C

Palette guide

How to use Twilight Shadow Path

Overview

The "Twilight Shadow Path" palette is a sophisticated monochrome collection, offering a dramatic gradient of dark greys and charcoals. Ranging from a profound near-black (#1C1C1C) to a lighter, atmospheric grey (#9C9C9C), this palette is perfect for creating sleek, modern, and minimalist designs. Developers and designers can utilize these shades to establish depth, structure, and a strong sense of professionalism without introducing additional hues. It's exceptionally versatile for tech interfaces, architectural presentations, or any project demanding a clean, understated, and highly functional aesthetic.

Best used for

Modern corporate websites
Tech product interfaces (dark mode)
Architectural design portfolios
Minimalist branding
Photography and art gallery sites
Data visualization dashboards

Suggested color roles

primary

Use #1C1C1C (Deep Charcoal) for backgrounds in dark mode, primary headers, or grounding elements, providing a strong, elegant base.

secondary

Apply #3C3C3C (Dark Grey) for section dividers, secondary navigation, or subtle background variations in a dark theme.

accent

Employ #7C7C7C (Medium Grey) for subtle interactive elements, borders, or to highlight secondary information without breaking the monochrome feel.

background

Utilize #1C1C1C to create a strong, sophisticated dark canvas. Alternatively, #9C9C9C for a very light grey background.

text

For primary body text on darker backgrounds like #1C1C1C or #3C3C3C, use #9C9C9C or #7C7C7C to ensure readability.

Accessibility notes

Ensure sufficient contrast between lighter greys (e.g., #9C9C9C) and darker greys (e.g., #1C1C1C) for all text.
Avoid using adjacent shades like #5C5C5C on #3C3C3C for crucial information due to low contrast.
#1C1C1C text on #3C3C3C will likely fail contrast requirements; use lighter text on darker backgrounds.
Always test contrast for interactive elements and small text, as monochrome palettes can easily fall short of accessibility standards.

Recommended combinations

Deep Contrast

Excellent for dark mode UI, with light text on a deep background and a mid-tone for subtle accents.

#1C1C1C · #9C9C9C · #3C3C3C

Subtle Shadow

Good for layering elements, creating visual hierarchy within a section without stark differences.

#3C3C3C · #7C7C7C · #5C5C5C

Path Markers

Use for navigation or progress indicators, showing steps from dark to light.

#1C1C1C · #5C5C5C · #9C9C9C

CSS variables

:root {
  --twilight-shadow-path-1: #1C1C1C;
  --twilight-shadow-path-2: #3C3C3C;
  --twilight-shadow-path-3: #5C5C5C;
  --twilight-shadow-path-4: #7C7C7C;
  --twilight-shadow-path-5: #9C9C9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-shadow-path": {
        1: "#1C1C1C",
        2: "#3C3C3C",
        3: "#5C5C5C",
        4: "#7C7C7C",
        5: "#9C9C9C",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#3C3C3C

Color 3#5C5C5C

Color 4#7C7C7C

Color 5#9C9C9C

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

4.1:1AA18

6.2:1AA

1.5:1Fail

1.6:1Fail

2.6:1Fail

4:1AA18

2.5:1Fail

1.6:1Fail

2.4:1Fail

4.1:1AA18

2.6:1Fail

1.6:1Fail

1.5:1Fail

6.2:1AA

4:1AA18

2.4:1Fail

1.5:1Fail

Similar palettes

More like Twilight Shadow Path

Twilight Shadow Path

See it in context.

Ready when you are.

Built with Twilight Shadow Path.

How to use Twilight Shadow Path

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Contrast

Subtle Shadow

Path Markers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Twilight Shadow Path