Back to palettes

Palette

Chiaroscuro Night

A dramatic interplay of light and shadow, evoking the stark beauty of chiaroscuro art and deep twilight.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#333333#4A4A4A#6D6D6D#919191

Palette guide

How to use Chiaroscuro Night

Overview

The Chiaroscuro Night palette is a dramatic monochrome collection, masterfully playing with shades of grey to evoke depth and sophistication. Ranging from the deep #1A1A1A to the lighter #919191, with intermediate tones like #333333, #4A4A4A, and #6D6D6D, it creates a powerful sense of interplay between light and shadow. This palette is perfect for designers aiming for a minimalist, elegant, or intense aesthetic. It's particularly effective for conveying modernity, luxury, or a serious tone, making it suitable for high-end corporate branding, artistic portfolios, or digital interfaces that prioritize clarity and a strong visual impact through subtle tonal variations.

Best used for

  • Luxury brand websites and apps
  • Photography and art portfolios
  • Corporate and professional presentations
  • Dark mode UI/UX design
  • Architectural and interior design concepts
  • Minimalist fashion branding

Suggested color roles

primary

Use #1A1A1A (Deep Charcoal) for primary backgrounds or important headers to establish a strong, foundational tone.

secondary

Apply #333333 (Dark Grey) for content blocks, navigation, or secondary headings, maintaining depth.

accent

Employ #6D6D6D (Medium Grey) for subtle accents, interactive elements, or to create visual hierarchy.

background

Utilize #1A1A1A as the main background, providing a rich, dark canvas for lighter elements.

text

For body text, #919191 or #6D6D6D provides excellent readability against the darker tones, or white for crisp contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, using lighter grays or white for text on darker backgrounds.
  • Avoid using similar shades of grey for text and background to prevent readability issues.
  • For interactive elements, ensure distinct contrast, perhaps using #919191 on #333333.
  • Always test text legibility, especially for smaller font sizes, across the various grey combinations.

Recommended combinations

Deep Contrast

Ideal for high-contrast interfaces, with #1A1A1A as background and lighter grays for text and elements.

#1A1A1A · #6D6D6D · #919191

Subtle Layers

Perfect for creating depth in UI elements, cards, or layered content blocks.

#333333 · #4A4A4A · #6D6D6D

Light Accent

Use #1A1A1A as a base, #919191 for highlights or important text, and #4A4A4A for secondary information.

#1A1A1A · #919191 · #4A4A4A

CSS variables

:root {
  --chiaroscuro-night-1: #1A1A1A;
  --chiaroscuro-night-2: #333333;
  --chiaroscuro-night-3: #4A4A4A;
  --chiaroscuro-night-4: #6D6D6D;
  --chiaroscuro-night-5: #919191;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "chiaroscuro-night": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4A4A4A",
        4: "#6D6D6D",
        5: "#919191",
      }
    }
  }
}

Related searches

monochrome dark palettegrey scale designminimalist black and greychiaroscuro color schemeelegant dark mode colors

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#4A4A4A
·
Color 4#6D6D6D
·
Color 5#919191
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.4:1AA18
5.5:1AA
2
1.4:1Fail
1.4:1Fail
2.4:1Fail
4:1AA18
3
2:1Fail
1.4:1Fail
1.7:1Fail
2.8:1Fail
4
3.4:1AA18
2.4:1Fail
1.7:1Fail
1.6:1Fail
5
5.5:1AA
4:1AA18
2.8:1Fail
1.6:1Fail

Similar palettes

More like Chiaroscuro Night

View all monochrome