Palette

Nocturne Piano Keys

A classic study in high contrast, mirroring the elegance of piano keys under a dim stage light.

monochromeelegant5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nocturne Piano Keys 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 Nocturne Piano Keys.

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

Data visualization

#0C0C0C#262626#404040#A0A0A0#D8D8D8

Palette guide

How to use Nocturne Piano Keys

Overview

The Nocturne Piano Keys palette offers a classic study in high contrast, mirroring the elegance of piano keys under a dim stage light. This sophisticated monochrome scheme, ranging from the profound depth of #0C0C0C to the subtle brightness of #D8D8D8, provides designers and developers with a powerful tool for creating sleek, dramatic interfaces. Intermediate shades like #404040 and #A0A0A0 allow for nuanced layering and visual hierarchy, perfect for conveying a sense of luxury and timelessness. It excels in dark mode applications where clarity and refined aesthetic are paramount.

Best used for

Luxury brand websites
Sophisticated dark mode UI/UX
Minimalist photography portfolios
Elegant event invitations
High-end product showcases
Art gallery digital displays

Suggested color roles

primary

Use #0C0C0C as the foundational background for a dramatic, immersive dark theme.

secondary

Employ #262626 for secondary backgrounds, card elements, or subtle section dividers.

accent

Apply #D8D8D8 sparingly for interactive elements, highlights, or key calls to action to create stark contrast.

background

The deepest tone, #0C0C0C, is ideal for the main canvas, offering a sleek, dark foundation.

text

For primary text, use #D8D8D8 on dark backgrounds like #0C0C0C or #262626. For secondary text, #A0A0A0 works well.

Accessibility notes

Ensure #D8D8D8 text on #0C0C0C or #262626 backgrounds meets WCAG AA/AAA contrast ratios.
Use #A0A0A0 for secondary text to maintain readability, especially on mid-dark backgrounds.
Avoid pairing #404040 as text on #262626 or #0C0C0C due to insufficient contrast for small text.
Reserve the darkest tones (#0C0C0C, #262626) primarily for backgrounds and larger graphical elements.

Recommended combinations

Classic Contrast

Ideal for main content areas: deep background, prominent text, and a slightly lighter panel color.

#0C0C0C · #D8D8D8 · #262626

Subtle Depth

Perfect for layering UI elements, such as cards on a panel, with clear but soft distinction.

#262626 · #404040 · #A0A0A0

Elegant Highlight

Use for headings and important information against a dark background, with a lighter accent for interactive states.

#0C0C0C · #A0A0A0 · #D8D8D8

CSS variables

:root {
  --nocturne-piano-keys-1: #0C0C0C;
  --nocturne-piano-keys-2: #262626;
  --nocturne-piano-keys-3: #404040;
  --nocturne-piano-keys-4: #A0A0A0;
  --nocturne-piano-keys-5: #D8D8D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nocturne-piano-keys": {
        1: "#0C0C0C",
        2: "#262626",
        3: "#404040",
        4: "#A0A0A0",
        5: "#D8D8D8",
      }
    }
  }
}

Hex values

Color 1#0C0C0C

Color 2#262626

Color 3#404040

Color 4#A0A0A0

Color 5#D8D8D8

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

7.5:1AAA

13.7:1AAA

1.3:1Fail

1.5:1Fail

5.8:1AA

10.6:1AAA

1.9:1Fail

1.5:1Fail

4:1AA18

7.3:1AAA

7.5:1AAA

5.8:1AA

4:1AA18

1.8:1Fail

13.7:1AAA

10.6:1AAA

7.3:1AAA

1.8:1Fail

Similar palettes

More like Nocturne Piano Keys

View all monochrome

Gothic Library Ink

Monochrome Shadow Play

Ancient Marble Column

Ancient Marble Statue

Ancient Stone Keep

Ash Cloud Symphony