Palette

Classic Diner Melody

Bright red, vivid blue, and warm cream, accented by dark grey, capture the energetic, nostalgic feel of a classic diner jukebox.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Classic Diner Melody 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 Classic Diner Melody.

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

Data visualization

#CC0000#00BFFF#FFD700#E0D0B8#2A2A2A

Palette guide

How to use Classic Diner Melody

Overview

The "Classic Diner Melody" palette evokes the vibrant, nostalgic energy of a 1950s American diner. It features a bold, iconic red #CC0000, a lively deep sky blue #00BFFF, and a cheerful golden yellow #FFD700. These bright, playful colors are grounded by a warm, creamy beige #E0D0B8 and a deep, solid charcoal #2A2A2A. This combination offers designers and developers a fun, energetic toolkit for creating retro-inspired interfaces, playful branding, or captivating digital content that captures a sense of timeless Americana and joyful simplicity. It's perfect for projects aiming for a distinctive, lively, and inviting aesthetic.

Best used for

Retro-themed websites and apps
Restaurant and cafe branding
Event promotions (vintage style)
Children's product marketing
Entertainment industry graphics
Nostalgic digital art

Suggested color roles

primary

#CC0000 - A confident, energetic red, excellent for main calls-to-action, prominent branding, or menu highlights.

secondary

#00BFFF - A vibrant blue, providing a playful counterpoint and ideal for secondary interactive elements or graphic accents.

accent

#FFD700 - The bright golden yellow, perfect for highlights, festive elements, or calls for attention.

background

#E0D0B8 - A warm, creamy beige, offering a soft, inviting base that allows brighter colors to pop.

text

#2A2A2A - For highly readable body text on light backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

Ensure sufficient contrast when using #FFD700 text on #E0D0B8 backgrounds; it's best for accents or larger display text.
The bright primary colors like #CC0000 and #00BFFF provide good contrast for white text.
Use a dark color like #2A2A2A for body text on the lighter #E0D0B8 background for optimal readability.
Be mindful of color combinations for colorblind users, especially with red and green (though no green here, but similar vibrancy interactions).

Recommended combinations

Jukebox Pop

A vibrant trio for bold headlines, playful illustrations, or energetic call-to-action buttons.

#CC0000 · #00BFFF · #FFD700

Diner Comfort

Excellent for main content areas, combining a warm background with dark readable text and a red accent.

#E0D0B8 · #2A2A2A · #CC0000

Retro Glow

Use for distinctive graphic elements, interactive menus, or playful branding elements.

#FFD700 · #00BFFF · #2A2A2A

CSS variables

:root {
  --classic-diner-melody-1: #CC0000;
  --classic-diner-melody-2: #00BFFF;
  --classic-diner-melody-3: #FFD700;
  --classic-diner-melody-4: #E0D0B8;
  --classic-diner-melody-5: #2A2A2A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "classic-diner-melody": {
        1: "#CC0000",
        2: "#00BFFF",
        3: "#FFD700",
        4: "#E0D0B8",
        5: "#2A2A2A",
      }
    }
  }
}

Hex values

Color 1#CC0000

Color 2#00BFFF

Color 3#FFD700

Color 4#E0D0B8

Color 5#2A2A2A

Accessibility

Contrast checker

2.8:1Fail

4.2:1AA18

3.9:1AA18

2.4:1Fail

2.8:1Fail

1.5:1Fail

1.4:1Fail

6.8:1AA

4.2:1AA18

1.5:1Fail

1.1:1Fail

10.2:1AAA

3.9:1AA18

1.4:1Fail

1.1:1Fail

9.5:1AAA

2.4:1Fail

6.8:1AA

10.2:1AAA

9.5:1AAA

Similar palettes

More like Classic Diner Melody

View all retro

Diner Booth Nostalgia