Palette

Chrome Jukebox Beat

Bright, punchy colors inspired by classic 50s diners, chrome accents, and upbeat rock 'n' roll tunes, bursting with energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ED2D3F#2B45A0#F7E94E#3D993D#F0F0F0

Palette guide

How to use Chrome Jukebox Beat

Overview

The Chrome Jukebox Beat palette is a vibrant and energetic collection, bursting with the lively spirit of classic 50s diners and rock 'n' roll. It features punchy primary colors: #ED2D3F (Bright Red), #2B45A0 (Royal Blue), #F7E94E (Lemon Yellow), and #3D993D (Kelly Green). The clean, neutral #F0F0F0 (Light Grey) provides a crisp backdrop, allowing these bold hues to truly pop. This palette is perfect for designers aiming to evoke fun, nostalgia, and an upbeat mood. It's particularly effective for entertainment, food, or any design that benefits from a high-energy, retro-inspired aesthetic that grabs attention.

Best used for

Retro entertainment and music branding
1950s themed event promotions
Fast food and diner branding
Playful children's product design
Vintage arcade game aesthetics
Lively website and app interfaces

Suggested color roles

primary

Utilize #ED2D3F (Bright Red) for dominant branding elements, call-to-actions, or impactful headlines.

secondary

Apply #2B45A0 (Royal Blue) for navigation, important links, or to provide a strong, classic contrast.

accent

Employ #F7E94E (Lemon Yellow) for highlights, warnings, or playful decorative elements to add a cheerful glow.

background

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

text

Black (#000000) or a very dark charcoal is recommended for body text to ensure optimal readability against the light background.

Accessibility notes

Ensure sufficient contrast for text on #F0F0F0 background; use black or dark grey.
Pair white text with #ED2D3F, #2B45A0, and #3D993D for optimal readability.
Check contrast for #F7E94E (Lemon Yellow) when used for text; black text is usually necessary.
Interactive elements should be clearly distinguishable with strong contrast against their background.

Recommended combinations

Classic Jukebox

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

#ED2D3F · #2B45A0 · #F0F0F0

Energetic Pop

Combine for dynamic illustrations, infographics, or sections needing multiple vibrant, contrasting colors.

#F7E94E · #3D993D · #ED2D3F

Retro Balance

Use #F0F0F0 as a base, #2B45A0 for content, and #F7E94E for cheerful accents.

#2B45A0 · #F0F0F0 · #F7E94E

CSS variables

:root {
  --chrome-jukebox-beat-1: #ED2D3F;
  --chrome-jukebox-beat-2: #2B45A0;
  --chrome-jukebox-beat-3: #F7E94E;
  --chrome-jukebox-beat-4: #3D993D;
  --chrome-jukebox-beat-5: #F0F0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "chrome-jukebox-beat": {
        1: "#ED2D3F",
        2: "#2B45A0",
        3: "#F7E94E",
        4: "#3D993D",
        5: "#F0F0F0",
      }
    }
  }
}

Hex values

Color 1#ED2D3F

Color 2#2B45A0

Color 3#F7E94E

Color 4#3D993D

Color 5#F0F0F0

Accessibility

Contrast checker

2.1:1Fail

3.3:1AA18

1.2:1Fail

3.7:1AA18

2.1:1Fail

6.8:1AA

2.4:1Fail

7.5:1AAA

3.3:1AA18

6.8:1AA

2.9:1Fail

1.1:1Fail

1.2:1Fail

2.4:1Fail

2.9:1Fail

3.2:1AA18

3.7:1AA18

7.5:1AAA

1.1:1Fail

3.2:1AA18

Similar palettes

More like Chrome Jukebox Beat

View all vibrant

Pop Art Carnival

Abstract Block Play

Abstract Expression Brush

Abstract Geometric Hue

Arcade Game Flash

Bold Art Canvas