Palette

Vintage Soda Shop

Classic 1950s diner vibes with bright, cheerful colors and a touch of nostalgic charm.

Vibrantplayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Soda Shop 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 Vintage Soda Shop.

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

Data visualization

#E4242B#76EEC6#FDF4DC#F0B4BB#A8A8A8

Palette guide

How to use Vintage Soda Shop

Overview

The Vintage Soda Shop palette is a lively collection that perfectly captures the cheerful spirit of a 1950s diner. With its vibrant red, `#E4242B`, and refreshing teal, `#76EEC6`, it offers a playful yet classic foundation for design projects. The palette is softened by a warm cream, `#FDF4DC`, a delicate pink, `#F0B4BB`, and a versatile grey, `#A8A8A8`, allowing for balanced compositions. Designers and developers can leverage this palette to evoke nostalgia and a sense of fun, ensuring engaging and memorable user experiences.

Best used for

Retro diner or cafe branding
Children's party invitations and decor
Playful website design and UI elements
Vintage-themed product packaging
Social media graphics for nostalgic content
Apparel and accessory designs with a 50s aesthetic

Suggested color roles

primary

Use `#E4242B` as a bold, energetic primary for calls to action, headers, or main brand elements to grab attention.

secondary

Apply `#76EEC6` for complementary sections, sub-headings, or accent elements, offering a fresh contrast.

accent

Incorporate `#F0B4BB` for delicate details, illustrations, or subtle highlights, adding a touch of playful charm.

background

Utilize `#FDF4DC` as a clean, warm background base that allows other vibrant colors to pop.

text

Employ a deep charcoal or black for main body text, and `#A8A8A8` for secondary text or subtle decorative elements.

Accessibility notes

Ensure `#E4242B` text on `#FDF4DC` backgrounds meets contrast standards for readability.
Avoid using `#F0B4BB` for small text against light backgrounds due to potential low contrast.
When using `#76EEC6` as a background, choose a dark, highly contrasting text color.
Test `#A8A8A8` for text readability on both `#FDF4DC` and `#F0B4BB` backgrounds.

Recommended combinations

Diner Classic

Ideal for main branding, evoking an immediate retro diner feel with bold contrast.

#E4242B · #FDF4DC · #76EEC6

Sweet & Subtle

Perfect for softer elements, backgrounds, or secondary information, maintaining a gentle vintage touch.

#F0B4BB · #FDF4DC · #A8A8A8

Retro Pop

Creates a modern twist on the retro theme, suitable for playful accents or interactive elements.

#76EEC6 · #E4242B · #A8A8A8

CSS variables

:root {
  --vintage-soda-shop-1: #E4242B;
  --vintage-soda-shop-2: #76EEC6;
  --vintage-soda-shop-3: #FDF4DC;
  --vintage-soda-shop-4: #F0B4BB;
  --vintage-soda-shop-5: #A8A8A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-soda-shop": {
        1: "#E4242B",
        2: "#76EEC6",
        3: "#FDF4DC",
        4: "#F0B4BB",
        5: "#A8A8A8",
      }
    }
  }
}

Hex values

Color 1#E4242B

Color 2#76EEC6

Color 3#FDF4DC

Color 4#F0B4BB

Color 5#A8A8A8

Accessibility

Contrast checker

3.2:1AA18

4.2:1AA18

2.6:1Fail

1.9:1Fail

3.2:1AA18

1.3:1Fail

1.2:1Fail

1.7:1Fail

4.2:1AA18

1.3:1Fail

1.6:1Fail

2.2:1Fail

2.6:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

1.9:1Fail

1.7:1Fail

2.2:1Fail

1.4:1Fail

Similar palettes

More like Vintage Soda Shop

View all Vibrant

Pixel Block Party

Playful Gumball Brights