Back to palettes

Palette

Noir Jazz Club

Deep, smoky grays and muted blues creating the sophisticated, shadowy ambiance of a jazz club.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#727E88#535E66#3A4349#242C30#1A2024

Palette guide

How to use Noir Jazz Club

Overview

This "Noir Jazz Club" palette immerses designs in a sophisticated, smoky ambiance, drawing inspiration from deep, muted blues and grays. The darkest tones, #1A2024 and #242C30, provide a rich, mysterious foundation, reminiscent of a dimly lit club interior. Progressively lighter shades like #3A4349, #535E66, and #727E88 introduce subtle variations in light and shadow, allowing for depth and visual interest without breaking the overall moody aesthetic. This palette is exceptionally cohesive, offering a seamless gradient of cool, desaturated colors. Designers can leverage it for projects requiring a refined, introspective, or exclusive feel, perfect for creating elegant dark themes or atmospheric digital experiences.

Best used for

  • Sophisticated web dashboards
  • Premium app UI design
  • Branding for high-end audio equipment
  • Dark mode themes for productivity apps
  • Architectural photography presentations
  • Digital art with a moody, cool tone

Suggested color roles

primary

The deepest, almost black-blue (#1A2024), serving as the dominant background for a profound, immersive experience.

secondary

Dark blue-gray (#242C30), excellent for secondary panels, card backgrounds, or subtle content separation.

accent

Lighter, desaturated blue-gray (#727E88), used for subtle highlights, active states, or secondary text elements.

background

#1A2024 (Creates a deep, sophisticated, and calming dark environment.)

text

For primary text on dark backgrounds, use a bright white or a very light gray like #E0E0E0. #727E88 can be used for secondary text on darker grays like #3A4349.

Accessibility notes

  • Ensure sufficient contrast when using #727E88 for text on darker shades like #3A4349; white is often safer.
  • White text on #1A2024 and #242C30 will provide excellent contrast and readability.
  • Avoid using #535E66 or #3A4349 for body text on backgrounds that are too close in luminance.
  • Test all text and interactive elements for WCAG AA compliance, especially with the mid-range grays.

Recommended combinations

Deep Serenity

Strong foundation with a subtle, cool highlight, ideal for sophisticated UI elements.

#1A2024 · #727E88 · #3A4349

Smoky Layers

Creates depth and visual hierarchy for content blocks and subtle background variations.

#242C30 · #535E66 · #1A2024

Cool Contrast

A balanced combination for secondary information and interactive components, maintaining mood.

#3A4349 · #727E88 · #1A2024

CSS variables

:root {
  --noir-jazz-club-1: #727E88;
  --noir-jazz-club-2: #535E66;
  --noir-jazz-club-3: #3A4349;
  --noir-jazz-club-4: #242C30;
  --noir-jazz-club-5: #1A2024;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "noir-jazz-club": {
        1: "#727E88",
        2: "#535E66",
        3: "#3A4349",
        4: "#242C30",
        5: "#1A2024",
      }
    }
  }
}

Related searches

dark blue grey palettesophisticated dark UIcool mood color schemejazz club aesthetic colorsdeep desaturated palette

Palette colors

Hex values

Color 1#727E88
·
Color 2#535E66
·
Color 3#3A4349
·
Color 4#242C30
·
Color 5#1A2024
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.4:1AA18
4:1AA18
2
1.6:1Fail
1.5:1Fail
2.1:1Fail
2.5:1Fail
3
2.4:1Fail
1.5:1Fail
1.4:1Fail
1.6:1Fail
4
3.4:1AA18
2.1:1Fail
1.4:1Fail
1.2:1Fail
5
4:1AA18
2.5:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Noir Jazz Club

View all dark