Back to palettes

Palette

Art Deco Midnight

Sophisticated deep blues and grays, reminiscent of elegant Art Deco patterns under a moonless, luxurious night sky.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Art Deco Midnight 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 Art Deco Midnight.

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

Data visualization

#0F0F2F#2F2F5F#5F5F8F#9F9FBF#D0D0E0

Palette guide

How to use Art Deco Midnight

Overview

The "Art Deco Midnight" palette offers a sophisticated spectrum of deep blues and grays, reminiscent of elegant Art Deco patterns under a luxurious night sky. This collection is ideal for designers and developers seeking to create designs that convey mystery, luxury, and a refined coolness. The darkest shade, #0F0F2F, provides a profound, almost black base, while the progression through #2F2F5F, #5F5F8F, and #9F9FBF offers versatile mid-tones. The lightest blue-gray, #D0D0E0, provides a gentle highlight. This palette is perfect for high-end digital experiences, sophisticated branding, or any project requiring a dark, elegant, and modern aesthetic.

Best used for

  • Luxury watch or electronics websites
  • Exclusive night club branding
  • High-end event invitations
  • Dark mode UI designs
  • Science fiction or mystery game aesthetics
  • Sophisticated corporate presentations

Suggested color roles

primary

Use #2F2F5F, a deep, rich navy-blue, as a commanding base for main content areas, navigation, or significant design elements, conveying luxury.

secondary

Apply #5F5F8F, a mid-tone blue-gray, for subheadings, background panels, or informational blocks, adding depth without being too dark.

accent

Employ #9F9FBF, a soft, muted blue-gray, for calls-to-action, interactive elements, or subtle highlights that stand out from darker tones.

background

Select #0F0F2F, a profound, almost black, deep navy, as an incredibly luxurious and immersive backdrop, making lighter elements shine.

text

Choose #D0D0E0, a very light, almost white blue-gray, for body text and headlines, ensuring excellent readability against dark backgrounds.

Accessibility notes

  • Ensure #D0D0E0 text on #0F0F2F background meets WCAG AAA contrast for body text.
  • Avoid using #9F9FBF text on #5F5F8F, as the contrast might be too low for readability.
  • For interactive elements, use #D0D0E0 against #2F2F5F to ensure clear visual cues.
  • When using #9F9FBF as a background, ensure text is dark (e.g., #0F0F2F or black) for good contrast.

Recommended combinations

Midnight Depth

Perfect for a dark mode interface, with the lightest color for text and mid-tone for secondary elements.

#0F0F2F · #D0D0E0 · #5F5F8F

Subtle Elegance

Creates sophisticated content cards, with the lightest color for headings and the mid-tone for supporting text.

#2F2F5F · #9F9FBF · #D0D0E0

Layered Cool

Ideal for a layered navigation menu, with the darkest blue for active states and the lightest for icons.

#5F5F8F · #0F0F2F · #9F9FBF

CSS variables

:root {
  --art-deco-midnight-2-1: #0F0F2F;
  --art-deco-midnight-2-2: #2F2F5F;
  --art-deco-midnight-2-3: #5F5F8F;
  --art-deco-midnight-2-4: #9F9FBF;
  --art-deco-midnight-2-5: #D0D0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "art-deco-midnight-2": {
        1: "#0F0F2F",
        2: "#2F2F5F",
        3: "#5F5F8F",
        4: "#9F9FBF",
        5: "#D0D0E0",
      }
    }
  }
}

Related searches

art deco dark bluemidnight blue paletteelegant dark themeluxury blue grey colorssophisticated UI dark mode

Palette colors

Hex values

Color 1#0F0F2F
·
Color 2#2F2F5F
·
Color 3#5F5F8F
·
Color 4#9F9FBF
·
Color 5#D0D0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.1:1AA18
7.2:1AAA
12.2:1AAA
2
1.5:1Fail
2.1:1Fail
4.8:1AA
8.1:1AAA
3
3.1:1AA18
2.1:1Fail
2.3:1Fail
3.9:1AA18
4
7.2:1AAA
4.8:1AA
2.3:1Fail
1.7:1Fail
5
12.2:1AAA
8.1:1AAA
3.9:1AA18
1.7:1Fail

Similar palettes

More like Art Deco Midnight

View all dark
Art Deco Emerald
Art Deco Midnight
Art Deco Speakeasy
Gala Night Shine
Gatsby Emerald Glamour
Jazz Age Glamour