Palette

Smoky Bebop

A deep, sultry palette capturing the smoky ambiance and cool sophistication of a late-night jazz club.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#4A3C30#696969#800000#C0C0C0

Palette guide

How to use Smoky Bebop

Overview

The Smoky Bebop palette captures the sultry, sophisticated ambiance of a late-night jazz club. Featuring deep, moody tones like #2F4F4F (Dark Slate Gray) and #4A3C30 (Dark Sienna), it's ideal for projects aiming for a vintage yet elegant feel. The accent of #800000 (Maroon) adds a touch of dramatic flair, balanced by the versatile #696969 (Dim Gray) and the bright contrast of #C0C0C0 (Silver). This collection provides designers and developers with a cohesive set of colors to evoke mystery, warmth, and timeless charm in their digital and physical creations.

Best used for

Vintage-themed branding or websites
Evening event invitations and promotions
Luxury product packaging (e.g., spirits, watches)
Dark mode UI themes for sophisticated apps
Editorial design for arts and culture magazines
Restaurant or bar interior design concepts

Suggested color roles

primary

#2F4F4F serves as a deep, stable foundation, perfect for large background areas or primary branding elements.

secondary

#4A3C30 offers a warm, earthy complement, excellent for secondary sections, panels, or rich accent details.

accent

#800000 provides a bold, vintage pop, best used sparingly for calls-to-action, key highlights, or decorative elements.

background

Use #2F4F4F or #4A3C30 for a deep, immersive background that sets a luxurious and moody tone.

text

#C0C0C0 is ideal for body text on dark backgrounds, ensuring readability. For headings, a crisp white or light cream could also be considered.

Accessibility notes

Contrast between #800000 (Maroon) and darker backgrounds like #2F4F4F or #4A3C30 will be low; use for non-critical elements.
Ensure #C0C0C0 (Silver) has sufficient contrast against any chosen background, especially #696969.
For critical body text on #2F4F4F or #4A3C30, a lighter color such as white or #C0C0C0 is essential for readability.
Reserve the vibrant #800000 for large, decorative elements or interactive states that don't rely solely on color for meaning.

Recommended combinations

Deep Jazz Night

Creates a rich, multi-layered dark aesthetic for immersive website sections or sophisticated presentations.

#2F4F4F · #4A3C30 · #696969

Vintage Spotlight

Highlights key information with a warm base, a striking accent, and clear, readable text or details.

#4A3C30 · #800000 · #C0C0C0

Subtle Elegance

Offers a balanced, understated look, perfect for clean layouts where content is paramount but sophistication is desired.

#2F4F4F · #696969 · #C0C0C0

CSS variables

:root {
  --smoky-bebop-1: #2F4F4F;
  --smoky-bebop-2: #4A3C30;
  --smoky-bebop-3: #696969;
  --smoky-bebop-4: #800000;
  --smoky-bebop-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-bebop": {
        1: "#2F4F4F",
        2: "#4A3C30",
        3: "#696969",
        4: "#800000",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4A3C30

Color 3#696969

Color 4#800000

Color 5#C0C0C0

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

1.2:1Fail

4.9:1AA

1.2:1Fail

1.9:1Fail

1:1Fail

5.8:1AA

1.6:1Fail

1.9:1Fail

2:1Fail

3:1AA18

1.2:1Fail

1:1Fail

2:1Fail

6:1AA

4.9:1AA

5.8:1AA

3:1AA18

6:1AA

Similar palettes

More like Smoky Bebop

Smoky Bebop

See it in context.

Ready when you are.

Built with Smoky Bebop.

How to use Smoky Bebop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Jazz Night

Vintage Spotlight

Subtle Elegance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Smoky Bebop