Palette

Urban Sketch Night

A sophisticated grayscale, capturing the shadowy forms and subtle textures of a city at night.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Sketch Night 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 Urban Sketch Night.

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

Data visualization

#2C2C2C#4A4A4A#7D7D7D#AAAAAA#DCDCDC

Palette guide

How to use Urban Sketch Night

Overview

The Urban Sketch Night palette is a sophisticated grayscale collection, capturing the shadowy forms and subtle textures of a city at night. From the deep #2C2C2C to the luminous #DCDCDC, with elegant mid-tones like #4A4A4A and #7D7D7D, this palette offers a refined and dramatic aesthetic. It's perfect for designers and developers aiming to create dark-mode interfaces, luxurious branding, or artistic projects that emphasize depth and quiet elegance. The versatility of #AAAAAA allows for gentle highlights, ensuring readability while maintaining the palette's overall moody and contemporary feel, ideal for a sleek digital experience.

Best used for

Dark mode web applications
Luxury brand identity
Photography and art portfolios
High-end product showcases
Gaming interface design
Architectural night renders

Suggested color roles

primary

#2C2C2C - A profound, dark base for main backgrounds, headers, or robust structural elements, conveying elegance and depth.

secondary

#4A4A4A - An excellent choice for secondary panels, prominent content blocks, or large typography, maintaining the dark theme.

accent

#7D7D7D - A versatile mid-grey for subtle highlights, interactive states, or decorative lines, offering a soft visual cue.

background

#DCDCDC - A very light, almost white, background for specific content areas, providing high contrast for dark text or images.

text

#DCDCDC - Ideal for body text on dark backgrounds like #2C2C2C or #4A4A4A, ensuring excellent readability. For light backgrounds, use #2C2C2C or black.

Accessibility notes

Ensure #DCDCDC text on #2C2C2C or #4A4A4A backgrounds meets WCAG AA contrast ratios.
Avoid using #7D7D7D for small text on #AAAAAA due to potentially low contrast.
The darkest and lightest colors provide optimal contrast for clear visual hierarchy.
Thoroughly test all text and interactive elements for readability across the palette.

Recommended combinations

Deep Night

For a sophisticated dark mode interface, strong headers, or impactful branding that evokes mystery and elegance.

#2C2C2C · #4A4A4A · #7D7D7D

Urban Glow

Ideal for subtle gradients, background textures, or secondary content areas, creating a soft, luminous effect.

#7D7D7D · #AAAAAA · #DCDCDC

Sharp Contrast

Use for crisp typography and interactive elements, ensuring excellent readability and a modern, high-contrast look.

#2C2C2C · #DCDCDC · #AAAAAA

CSS variables

:root {
  --urban-sketch-night-1: #2C2C2C;
  --urban-sketch-night-2: #4A4A4A;
  --urban-sketch-night-3: #7D7D7D;
  --urban-sketch-night-4: #AAAAAA;
  --urban-sketch-night-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-sketch-night": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#7D7D7D",
        4: "#AAAAAA",
        5: "#DCDCDC",
      }
    }
  }
}

Hex values

Color 1#2C2C2C

Color 2#4A4A4A

Color 3#7D7D7D

Color 4#AAAAAA

Color 5#DCDCDC

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

6:1AA

10.2:1AAA

1.6:1Fail

2.2:1Fail

3.8:1AA18

6.5:1AA

3.4:1AA18

2.2:1Fail

1.8:1Fail

3:1AA18

6:1AA

3.8:1AA18

1.8:1Fail

1.7:1Fail

10.2:1AAA

6.5:1AA

3:1AA18

1.7:1Fail

Similar palettes

More like Urban Sketch Night