Palette

Smoky Jazz Evening

A sophisticated and moody collection of grays, capturing the ambiance of a dimly lit, smoky jazz club.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Jazz Evening 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 Smoky Jazz Evening.

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

Data visualization

#3C3C47#5E626B#8C9199#25262B#7A7E84

Palette guide

How to use Smoky Jazz Evening

Overview

The Smoky Jazz Evening palette presents a sophisticated and moody collection of grays, capturing the ambiance of a dimly lit, smoky jazz club. Anchored by the profound #25262B (Very Dark Blue-Gray) and #3C3C47 (Dark Blue-Gray), it offers a gradual progression to lighter, ethereal tones like #7A7E84 (Cool Gray) and #8C9199 (Light Blue-Gray). This palette provides designers and developers with a refined foundation to craft elegant digital experiences, branding, or user interfaces that exude seriousness, professionalism, and a timeless, understated charm, perfect for conveying depth and focus.

Best used for

High-end event branding and marketing materials
Dark mode themes for productivity or professional apps
Architectural visualization backgrounds or presentations
Automotive interior design concepts and showcases
Luxury product showcases and e-commerce platforms
Editorial layouts with a serious, refined, and artistic tone

Suggested color roles

primary

#25262B serves as a deep, stable, and grounding base, ideal for primary backgrounds or large content areas.

secondary

#3C3C47 offers a slightly lighter, complementary dark, excellent for secondary panels, cards, or subtle content divisions.

accent

#8C9199 provides a soft, subtle highlight, perfect for interactive elements, delicate lines, or textual emphasis.

background

Use #25262B for a consistently dark, sophisticated canvas that allows lighter elements to emerge gracefully.

text

#8C9199 or #7A7E84 works well for body text on the darkest backgrounds, ensuring readability. For headings, a crisp white is highly effective.

Accessibility notes

The range of grays is close; ensure text on backgrounds has sufficient contrast, especially for #5E626B on #3C3C47.
#8C9199 and #7A7E84 will generally have good contrast on #25262B and #3C3C47, making them suitable for body text.
Avoid using #5E626B as text on #3C3C47 for readability purposes; opt for a lighter color.
Consider a pure white for headings or critical information on the darkest shades to maximize legibility and impact.

Recommended combinations

Deep Grayscale

Establishes a profound and layered dark aesthetic, ideal for creating depth in UI elements or background compositions.

#25262B · #3C3C47 · #5E626B

Subtle Contrast

Offers a harmonious transition from dark to light, suitable for layered content or subtle highlight effects.

#3C3C47 · #7A7E84 · #8C9199

Elegant Layers

Delivers a sophisticated, clean look with clear visual hierarchy, perfect for minimalist interfaces with a touch of depth.

#25262B · #5E626B · #8C9199

CSS variables

:root {
  --smoky-jazz-evening-1: #3C3C47;
  --smoky-jazz-evening-2: #5E626B;
  --smoky-jazz-evening-3: #8C9199;
  --smoky-jazz-evening-4: #25262B;
  --smoky-jazz-evening-5: #7A7E84;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-jazz-evening": {
        1: "#3C3C47",
        2: "#5E626B",
        3: "#8C9199",
        4: "#25262B",
        5: "#7A7E84",
      }
    }
  }
}

Hex values

Color 1#3C3C47

Color 2#5E626B

Color 3#8C9199

Color 4#25262B

Color 5#7A7E84

Accessibility

Contrast checker

1.8:1Fail

3.4:1AA18

1.4:1Fail

2.7:1Fail

1.8:1Fail

1.9:1Fail

2.5:1Fail

1.5:1Fail