Palette

Noir Alley Mist

Deep and shadowy greys, creating a mysterious and classic film noir ambiance.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Noir Alley Mist 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 Noir Alley Mist.

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

Data visualization

#1A1A1A#333333#555555#888888#AAAAAA

Palette guide

How to use Noir Alley Mist

Overview

The Noir Alley Mist palette evokes a mysterious and classic film noir ambiance with its deep and shadowy greys. Ranging from the profound #1A1A1A to the luminous #AAAAAA, this monochrome scheme provides a sophisticated and timeless foundation for designs. Intermediate shades like #555555 and #888888 allow for subtle transitions and layered depth, perfect for creating dramatic visual narratives. Designers and developers will find this palette ideal for projects requiring a vintage, enigmatic, or minimalist dark aesthetic, ensuring a sleek and impactful user experience.

Best used for

Vintage-inspired web design
Film noir themed interfaces
Mystery game aesthetics
Sophisticated branding
Photography with strong shadows
Dark mode applications

Suggested color roles

primary

Utilize #1A1A1A as the foundational background for maximum depth and dramatic impact.

secondary

Employ #333333 for secondary backgrounds, panels, or content containers.

accent

Reserve #AAAAAA for interactive elements, key highlights, or crucial calls to action to ensure visibility.

background

The primary canvas should be #1A1A1A or #333333 for a consistent dark theme.

text

For primary text, use #AAAAAA on dark backgrounds. #888888 can be used for secondary or less critical information.

Accessibility notes

Ensure #AAAAAA provides sufficient contrast against #1A1A1A and #333333 for all text elements.
Use #888888 for secondary text, but verify contrast on darker elements like #333333.
Avoid using #555555 as text on very dark backgrounds such as #333333 due to potential low contrast.
Prioritize #AAAAAA for all critical text and interactive elements to maintain readability.

Recommended combinations

Deep Shadows

Ideal for layered backgrounds, UI sections, and creating deep, subtle gradients.

#1A1A1A · #333333 · #555555

Misty Light

Excellent for content cards, secondary information, and subtle highlights, suggesting mist in an alley.

#333333 · #888888 · #AAAAAA

Stark Contrast

Use for prominent headers, calls to action, and main text on a dark base for high impact.

#1A1A1A · #AAAAAA · #888888

CSS variables

:root {
  --noir-alley-mist-1: #1A1A1A;
  --noir-alley-mist-2: #333333;
  --noir-alley-mist-3: #555555;
  --noir-alley-mist-4: #888888;
  --noir-alley-mist-5: #AAAAAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-alley-mist": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#555555",
        4: "#888888",
        5: "#AAAAAA",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#333333

Color 3#555555

Color 4#888888

Color 5#AAAAAA

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4.9:1AA

7.5:1AAA

1.4:1Fail

1.7:1Fail

3.6:1AA18

5.4:1AA

2.3:1Fail

1.7:1Fail

2.1:1Fail

3.2:1AA18

4.9:1AA

3.6:1AA18

2.1:1Fail

1.5:1Fail

7.5:1AAA

5.4:1AA

3.2:1AA18

1.5:1Fail

Similar palettes

More like Noir Alley Mist