Palette

Chrome Jukebox Jive

Bright and playful, reminiscent of classic 1950s diners with chrome accents and bright upholstery.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Chrome Jukebox 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 Chrome Jukebox Jive.

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

Data visualization

#C20038#FFD133#00A6B2#F0F0F0#4A4A4A

Palette guide

How to use Chrome Jukebox Jive

Overview

The Chrome Jukebox Jive palette is a bright and playful collection, perfectly capturing the vibrant energy of 1950s diners with their iconic chrome accents and bold upholstery. It features strong, classic colors like #C20038 (Deep Red), #FFD133 (Vibrant Yellow), and #00A6B2 (Teal Blue). The neutral tones of #F0F0F0 (Light Grey) and #4A4A4A (Dark Grey) provide a clean, modern contrast, reminiscent of polished chrome and dark vinyl. This palette is ideal for designers aiming to evoke nostalgia, fun, and a lively retro feel. It's particularly effective for entertainment, food, or any design that benefits from a cheerful, eye-catching, and vintage-inspired aesthetic.

Best used for

Retro diner and cafe branding
Vintage-themed event promotions
Music and entertainment websites
Playful product packaging
50s inspired fashion accessories
Lively social media campaigns

Suggested color roles

primary

Utilize #C20038 (Deep Red) for dominant branding, impactful call-to-actions, or significant headlines.

secondary

Apply #00A6B2 (Teal Blue) for navigation, important links, or to provide a refreshing, cool contrast.

accent

Employ #FFD133 (Vibrant Yellow) for highlights, warnings, or playful decorative elements to add a cheerful pop.

background

Use #F0F0F0 (Light Grey) as a clean, neutral background that allows the vibrant colors to stand out clearly.

text

A dark grey (#4A4A4A) or classic black (#000000) is recommended for body text to ensure optimal readability against the light background.

Accessibility notes

Ensure sufficient contrast for text on #F0F0F0 background; use #4A4A4A or black.
Pair white text with #C20038 and #00A6B2 for optimal readability.
Check contrast for #FFD133 (Vibrant Yellow) when used for text; black text is usually necessary.
Interactive elements should be clearly distinguishable with strong contrast and visual cues.

Recommended combinations

Retro Core

Ideal for main branding, with #F0F0F0 as background and the bold colors for key elements.

#C20038 · #00A6B2 · #F0F0F0

Jukebox Pop

Combine for dynamic illustrations, infographics, or sections needing vibrant accents with a dark anchor.

#FFD133 · #C20038 · #4A4A4A

Clean & Bright

Use #F0F0F0 as a base, #00A6B2 for content, and #FFD133 for cheerful highlights.

#F0F0F0 · #00A6B2 · #FFD133

CSS variables

:root {
  --chrome-jukebox-jive-1: #C20038;
  --chrome-jukebox-jive-2: #FFD133;
  --chrome-jukebox-jive-3: #00A6B2;
  --chrome-jukebox-jive-4: #F0F0F0;
  --chrome-jukebox-jive-5: #4A4A4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "chrome-jukebox-jive": {
        1: "#C20038",
        2: "#FFD133",
        3: "#00A6B2",
        4: "#F0F0F0",
        5: "#4A4A4A",
      }
    }
  }
}

Hex values

Color 1#C20038

Color 2#FFD133

Color 3#00A6B2

Color 4#F0F0F0

Color 5#4A4A4A

Accessibility

Contrast checker

4.3:1AA18

2.1:1Fail

5.5:1AA

1.4:1Fail

4.3:1AA18

2:1Fail

1.3:1Fail

6.1:1AA

2.1:1Fail

2:1Fail

2.6:1Fail

3:1Fail