Palette

Juke Joint Jive

Bold, playful colors capture the lively, nostalgic charm of a classic retro American diner.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Juke Joint Jive 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 Juke Joint Jive.

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

Data visualization

#AF002D#E84A5F#2A9D8F#F7F8FA#4F6456

Palette guide

How to use Juke Joint Jive

Overview

The Juke Joint Jive palette captures the lively, nostalgic charm of a classic retro American diner. This bold and playful collection features a deep cherry red (#AF002D), a vibrant coral (#E84A5F), a cool teal (#2A9D8F), a crisp off-white (#F7F8FA), and a muted dark green (#4F6456). It's an excellent choice for designers and developers aiming to infuse projects with a vintage yet spirited feel. These colors work harmoniously to create engaging visual experiences that evoke a sense of fun, history, and a touch of mid-century cool, perfect for themed branding or digital interfaces.

Best used for

Retro diner or restaurant branding
Vintage-inspired apparel design
Event invitations with a nostalgic theme
Themed website or app interfaces
Packaging for artisanal or retro products
Playful, illustrative graphic design

Suggested color roles

primary

Use #AF002D (cherry red) as a strong, iconic primary color for branding or key interactive elements.

secondary

Employ #2A9D8F (teal) for a cool, sophisticated contrast, ideal for secondary headings or backgrounds.

accent

Apply #E84A5F (coral) sparingly for lively accents, highlights, or call-to-action buttons.

background

Utilize #F7F8FA (off-white) as a clean, warm vintage background, offering excellent readability for darker text.

text

For primary text, use #4F6456 (muted dark green) or a dark charcoal to maintain the retro aesthetic with good contrast.

Accessibility notes

The off-white #F7F8FA provides excellent contrast for darker text colors like #AF002D and #4F6456.
Ensure sufficient contrast for #E84A5F when used as text on lighter backgrounds; it may require a darker background.
Use #4F6456 for body text to maintain readability, especially on the #F7F8FA background.
Regularly check the contrast of all text and interactive elements to comply with WCAG standards.

Recommended combinations

Diner Classic

Ideal for main branding, menu designs, and website headers for a strong retro feel.

#AF002D · #F7F8FA · #2A9D8F

Retro Pop

Excellent for playful illustrations, secondary features, and vibrant highlights.

#E84A5F · #2A9D8F · #4F6456

Muted Base

Creates inviting backgrounds, subtle patterns, and readable body text areas.

#F7F8FA · #4F6456 · #AF002D

CSS variables

:root {
  --juke-joint-jive-1: #AF002D;
  --juke-joint-jive-2: #E84A5F;
  --juke-joint-jive-3: #2A9D8F;
  --juke-joint-jive-4: #F7F8FA;
  --juke-joint-jive-5: #4F6456;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "juke-joint-jive": {
        1: "#AF002D",
        2: "#E84A5F",
        3: "#2A9D8F",
        4: "#F7F8FA",
        5: "#4F6456",
      }
    }
  }
}

Hex values

Color 1#AF002D

Color 2#E84A5F

Color 3#2A9D8F

Color 4#F7F8FA

Color 5#4F6456

Accessibility

Contrast checker

1.9:1Fail

2.2:1Fail

6.9:1AA

1.1:1Fail

1.9:1Fail

1.1:1Fail

3.5:1AA18

1.7:1Fail

2.2:1Fail

1.1:1Fail

3.1:1AA18

1.9:1Fail

6.9:1AA

3.5:1AA18

3.1:1AA18

6:1AA

1.1:1Fail

1.7:1Fail

1.9:1Fail

6:1AA

Similar palettes

More like Juke Joint Jive

Juke Joint Jive

See it in context.

Ready when you are.

Built with Juke Joint Jive.

How to use Juke Joint Jive

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Diner Classic

Retro Pop

Muted Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Juke Joint Jive