Palette

Jukebox Soda Pop

Evokes the lively, classic atmosphere of a 1950s diner, full of cheerful primary colors and playful spirit.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jukebox Soda Pop 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 Jukebox Soda Pop.

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

Data visualization

#FF0000#0000FF#FFFF00#00FF00#FFC0CB

Palette guide

How to use Jukebox Soda Pop

Overview

The Jukebox Soda Pop palette evokes the lively, classic atmosphere of a 1950s diner with its cheerful primary colors and playful spirit. This bold collection features pure red (#FF0000), pure blue (#0000FF), pure yellow (#FFFF00), pure green (#00FF00), and a soft light pink (#FFC0CB). It's an excellent choice for designers and developers aiming to create highly energetic, nostalgic, and fun experiences. These fundamental, vibrant hues are perfect for projects that demand immediate attention and convey a sense of straightforward joy and classic Americana, ideal for playful branding.

Best used for

Children's product branding and packaging
Toy design and marketing
Fast food or casual diner branding
Educational materials for kids
Game interfaces and arcade themes
Bold, primary-focused graphic design

Suggested color roles

primary

Utilize #FF0000 (pure red) as an iconic, attention-grabbing primary color for branding or key elements.

secondary

Employ #0000FF (pure blue) for strong complementary elements, navigation, or robust contrasts.

accent

Apply #FFFF00 (pure yellow) sparingly for energetic highlights, interactive elements, or bright graphic details.

background

Use #FFC0CB (light pink) as a soft, playful background to soften the intensity of the primary colors.

text

For optimal readability, use black or a very dark charcoal for primary text, especially on bright backgrounds like #FFFF00.

Accessibility notes

Pure primary colors can be very intense; ensure sufficient contrast for text, especially on #FFFF00 or #00FF00.
Black or very dark gray text is crucial on lighter backgrounds like #FFC0CB and #FFFF00 to meet WCAG standards.
Avoid using highly saturated colors for large blocks of text; reserve them for accents or headlines.
Regularly check color contrast ratios for all text and interactive elements to ensure accessibility.

Recommended combinations

Primary Blast

Ideal for bold branding, call-to-actions, and iconic elements that need maximum impact.

#FF0000 · #0000FF · #FFFF00

Playful Mix

Excellent for illustrations, children's interfaces, and secondary visual features.

#00FF00 · #FFC0CB · #FF0000

Soft Serve

Creates backgrounds with bold accents, menu item highlights, or playful patterns.

#FFC0CB · #0000FF · #FFFF00

CSS variables

:root {
  --jukebox-soda-pop-1: #FF0000;
  --jukebox-soda-pop-2: #0000FF;
  --jukebox-soda-pop-3: #FFFF00;
  --jukebox-soda-pop-4: #00FF00;
  --jukebox-soda-pop-5: #FFC0CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jukebox-soda-pop": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#FFC0CB",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FF00

Color 5#FFC0CB

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2.9:1Fail

2.6:1Fail

2.1:1Fail

8:1AAA

6.3:1AA

5.6:1AA

3.7:1AA18

8:1AAA

1.3:1Fail

1.4:1Fail