Palette

Vintage Jazz Club

Smooth and sophisticated, evoking the smoky atmosphere of a classic jazz lounge.

darkretro5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#34495E#7F8C8D#BDC3C7#D6EAF8#2C3E50

Palette guide

How to use Vintage Jazz Club

Overview

The Vintage Jazz Club palette exudes sophistication and a smoky, elegant atmosphere, perfect for designs requiring a refined retro feel. Anchored by deep, rich blues like #34495E and #2C3E50, it incorporates cooler grays such as #7F8C8D and #BDC3C7, culminating in a soft, airy light blue #D6EAF8. This collection allows designers and developers to craft experiences that are both moody and inviting, evoking the classic allure of a bygone era. It's an excellent choice for projects where a sense of understated luxury, history, and a cool-toned sophistication are paramount, providing a harmonious and memorable visual journey.

Best used for

Branding for upscale bars, lounges, or music venues
Websites for luxury products or high-end services
Editorial design for culture, art, or fashion publications
UI/UX for sophisticated apps or dark mode interfaces
Event promotions for jazz concerts or vintage-themed parties
Interior design concepts for modern classic spaces

Suggested color roles

primary

Use #2C3E50 or #34495E as the dominant color for backgrounds, headers, or large content areas to set a deep, sophisticated mood.

secondary

Employ #7F8C8D for secondary information, subheadings, or dividing lines to introduce a subtle, cool contrast.

accent

Apply #BDC3C7 sparingly for buttons, icons, or interactive elements to provide a soft highlight against darker tones.

background

For a dark, atmospheric background, #2C3E50 is ideal. For lighter content areas, #D6EAF8 offers a clean, airy canvas.

text

For body text on dark backgrounds, #D6EAF8 provides excellent contrast. On lighter backgrounds, #2C3E50 ensures readability.

Accessibility notes

Ensure #D6EAF8 text on #2C3E50 or #34495E meets WCAG AA contrast ratios.
Avoid pairing #BDC3C7 text directly on #7F8C8D backgrounds due to insufficient contrast.
Use #2C3E50 for text over #D6EAF8 for optimal readability and accessibility.
Always test color combinations with accessibility checkers, especially for interactive elements and small text.

Recommended combinations

Smoky Elegance

Creates a dramatic and legible scheme, perfect for headings and body text on a dark canvas.

#2C3E50 · #7F8C8D · #D6EAF8

Cool Depth

Offers a layered, sophisticated look, suitable for UI elements or data visualizations.

#34495E · #BDC3C7 · #7F8C8D

Light Contrast

Provides a fresh, clean aesthetic with strong text contrast, ideal for lighter sections or forms.

#D6EAF8 · #2C3E50 · #BDC3C7

CSS variables

:root {
  --vintage-jazz-club-1: #34495E;
  --vintage-jazz-club-2: #7F8C8D;
  --vintage-jazz-club-3: #BDC3C7;
  --vintage-jazz-club-4: #D6EAF8;
  --vintage-jazz-club-5: #2C3E50;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-jazz-club": {
        1: "#34495E",
        2: "#7F8C8D",
        3: "#BDC3C7",
        4: "#D6EAF8",
        5: "#2C3E50",
      }
    }
  }
}

Hex values

Color 1#34495E

Color 2#7F8C8D

Color 3#BDC3C7

Color 4#D6EAF8

Color 5#2C3E50

Accessibility

Contrast checker

2.7:1Fail

5.2:1AA

7.5:1AAA

1.2:1Fail

2.7:1Fail

2:1Fail

2.8:1Fail

3.2:1AA18

5.2:1AA

2:1Fail

1.4:1Fail

6.2:1AA

7.5:1AAA

2.8:1Fail

1.4:1Fail

8.9:1AAA

1.2:1Fail

3.2:1AA18

6.2:1AA

8.9:1AAA

Similar palettes

More like Vintage Jazz Club

View all dark

Speakeasy Lounge Vibe

Film Noir Echo

Industrial Steampunk Grit

Rusty Foundry Steel

Ship Captain's Cabin

Steampunk Goggles