Palette

Retro Diner Pop

Bold and cheerful colors that bring to mind classic 50s diners, jukeboxes, and milkshakes.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Diner 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 Retro Diner Pop.

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

Data visualization

#FFD700#FF6347#DC143C#4682B4#B0C4DE

Palette guide

How to use Retro Diner Pop

Overview

The "Retro Diner Pop" palette offers a cheerful and nostalgic blend of colors, reminiscent of classic 1950s diners, jukeboxes, and milkshakes. It features a bright golden yellow (#FFD700), a warm coral-red (#FF6347), a deep crimson (#DC143C), a stable steel blue (#4682B4), and a soft light blue (#B0C4DE). This scheme is designed for designers and developers seeking to infuse projects with a playful, inviting, and distinctly vintage character. Utilize these hues to evoke a sense of comfort, optimism, and timeless charm.

Best used for

Food and beverage branding and packaging
Retro-themed event promotion and decor
Vintage-inspired fashion and apparel
UI/UX design for cheerful, nostalgic apps
Children's entertainment and educational design
Illustrations with a classic cartoon feel

Suggested color roles

primary

Designate #FFD700 (Golden Yellow) for optimistic calls-to-action, cheerful highlights, or key brand elements that radiate positivity.

secondary

Utilize #FF6347 (Coral-Red) for warm, inviting sections, secondary headlines, or to convey energy and friendliness.

accent

Incorporate #DC143C (Crimson) for deep, impactful details, important alerts, or to add a touch of rich contrast.

background

Apply #B0C4DE (Light Blue) as a soft, airy background, allowing the warmer and darker colors to pop beautifully.

text

Employ #4682B4 (Steel Blue) for body text on light backgrounds like #B0C4DE to ensure excellent readability and a harmonious feel.

Accessibility notes

Ensure #FFD700 (Golden Yellow) text has sufficient contrast against its background, especially if used on #B0C4DE (Light Blue).
The dark #DC143C (Crimson) and #4682B4 (Steel Blue) provide good contrast for text on #B0C4DE (Light Blue).
Avoid using #FF6347 (Coral-Red) as text on #DC143C (Crimson) without careful contrast testing due to similar hues.
For optimal readability, use #4682B4 (Steel Blue) or a dark charcoal for body text on light backgrounds.

Recommended combinations

Warm & Cool Retro

Excellent for creating dynamic, balanced sections, headers, or illustrations with a vibrant yet harmonious feel.

#FFD700 · #4682B4 · #DC143C

Diner Reds

Ideal for main content areas, providing clear hierarchy and a sophisticated, inviting aesthetic with a classic touch.

#FF6347 · #DC143C · #B0C4DE

Golden Pop

Perfect for highlights, calls-to-action, or graphical details that need to stand out with a cheerful and clean aesthetic.

#FFD700 · #B0C4DE · #4682B4

CSS variables

:root {
  --retro-diner-pop-3-1: #FFD700;
  --retro-diner-pop-3-2: #FF6347;
  --retro-diner-pop-3-3: #DC143C;
  --retro-diner-pop-3-4: #4682B4;
  --retro-diner-pop-3-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-pop-3": {
        1: "#FFD700",
        2: "#FF6347",
        3: "#DC143C",
        4: "#4682B4",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FF6347

Color 3#DC143C

Color 4#4682B4

Color 5#B0C4DE

Accessibility

Contrast checker

2.1:1Fail

3.6:1AA18

2.9:1Fail

1.3:1Fail

2.1:1Fail

1.7:1Fail

1.4:1Fail

1.7:1Fail

3.6:1AA18

1.7:1Fail

1.2:1Fail

2.8:1Fail

2.9:1Fail

1.4:1Fail

1.2:1Fail

2.3:1Fail

1.3:1Fail

1.7:1Fail

2.8:1Fail

2.3:1Fail

Similar palettes

More like Retro Diner Pop

Retro Diner Pop

See it in context.

Ready when you are.

Built with Retro Diner Pop.

How to use Retro Diner Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Warm & Cool Retro

Diner Reds

Golden Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Diner Pop