Palette

Midnight Jazz Club

A luxurious palette inspired by the rich, smoky atmosphere of a classic jazz lounge.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Jazz Club 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 Midnight Jazz Club.

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

Data visualization

#2C3E50#8E44AD#34495E#E74C3C#F1C40F

Palette guide

How to use Midnight Jazz Club

Overview

The "Midnight Jazz Club" palette evokes a sense of sophisticated elegance and retro mystery, perfect for designs aiming for a luxurious, noir aesthetic. Anchored by deep, smoky blues like #2C3E50 and #34495E, it offers a rich foundation. Vibrant accents, including the regal purple #8E44AD, the bold crimson #E74C3C, and the luminous gold #F1C40F, provide dynamic contrast and focal points. This palette is ideal for creating immersive experiences that feel both classic and contemporary, guiding users through a visually rich narrative. Designers can leverage its depth for premium branding or engaging digital interfaces requiring a touch of refined drama.

Best used for

High-end brand identity (luxury goods, bespoke services)
Elegant website and app UI/UX
Event promotions (jazz festivals, art galas)
Restaurant and bar branding/interiors
Editorial design for fashion or culture magazines
Gaming interfaces for mystery or adventure themes

Suggested color roles

primary

#2C3E50 - This deep, charcoal-blue serves as the core background or primary structural color, establishing the palette's sophisticated, dark mood.

secondary

#34495E - A slightly darker blue-grey, perfect for secondary backgrounds, borders, or subtle distinctions, adding depth without competing with the primary.

accent

#8E44AD - A rich, mysterious purple, excellent for highlighting key information, interactive elements, or adding a touch of opulent flair. Consider #F1C40F for a golden highlight or #E74C3C for a bold call to action.

background

#2C3E50 - Use this deep blue-grey as the predominant background to create the elegant, immersive atmosphere.

text

For optimal readability, pair with light text colors like pure white or a very light grey (#F0F0F0) against the dark backgrounds.

Accessibility notes

Ensure sufficient contrast when using #8E44AD or #E74C3C on #2C3E50 or #34495E. Aim for WCAG AA or AAA compliance.
Text in #F1C40F should only be used for larger headings or accents on dark backgrounds, as its luminosity might be low for small body text.
Always test color combinations with accessibility checkers, especially for text and interactive elements, to ensure legibility.
Provide a high-contrast mode if complex layering of these darker colors is used, ensuring crucial information remains accessible.

Recommended combinations

Noir Elegance

Ideal for sophisticated interfaces, branding, or editorial layouts where depth and subtle luxury are key. Use #2C3E50 as background, #34495E for secondary elements, and #8E44AD for elegant highlights.

#2C3E50 · #34495E · #8E44AD

Vibrant Spotlight

Use #2C3E50 as a dark canvas, with #F1C40F for glowing interactive elements and #E74C3C for impactful calls to action or warnings, creating a dynamic focal point.

#2C3E50 · #F1C40F · #E74C3C

Mystic Depth

Perfect for creating a mysterious, opulent feel. #34495E serves as a slightly softer dark base, #8E44AD for rich details, and #F1C40F for subtle, glowing accents or interactive states.

#34495E · #8E44AD · #F1C40F

CSS variables

:root {
  --midnight-jazz-club-2-1: #2C3E50;
  --midnight-jazz-club-2-2: #8E44AD;
  --midnight-jazz-club-2-3: #34495E;
  --midnight-jazz-club-2-4: #E74C3C;
  --midnight-jazz-club-2-5: #F1C40F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-jazz-club-2": {
        1: "#2C3E50",
        2: "#8E44AD",
        3: "#34495E",
        4: "#E74C3C",
        5: "#F1C40F",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#8E44AD

Color 3#34495E

Color 4#E74C3C

Color 5#F1C40F

Accessibility

Contrast checker

1.9:1Fail

1.2:1Fail

2.9:1Fail

6.6:1AA

1.9:1Fail

1.6:1Fail

1.5:1Fail

3.5:1AA18

1.2:1Fail

1.6:1Fail

2.4:1Fail

5.6:1AA

2.9:1Fail

1.5:1Fail

2.4:1Fail

2.3:1Fail

6.6:1AA

3.5:1AA18

5.6:1AA

2.3:1Fail

Similar palettes

More like Midnight Jazz Club

View all dark

Celestial Night Garden

Gala Night Velvet

Midnight Library Velvet

Twilight Bloom Garden

Art Deco Evening

Art Deco Sapphire Gleam