Palette

Retro Soda Shop

Bright and cheerful colors inspired by a classic 1950s soda shop with pink booths and neon lights.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF69B4#ADD8E6#FFD700#DC143C#2F4F4F

Palette guide

How to use Retro Soda Shop

Overview

The Retro Soda Shop palette is a vibrant and cheerful collection, perfectly capturing the spirit of a classic 1950s diner. It features a lively Hot Pink #FF69B4, a refreshing Light Blue #ADD8E6, a radiant Gold #FFD700, a bold Crimson #DC143C, and a sophisticated Dark Slate Gray #2F4F4F. This palette is ideal for designs demanding high energy, nostalgia, and a distinct pop-art aesthetic. Designers can use these hues for dynamic branding, engaging user interfaces, or playful illustrations. Developers will find these hex codes facilitate the creation of visually striking and memorable digital experiences.

Best used for

1950s diner branding and menus
Retro-themed website interfaces
Children's party invitations
Pop art style graphics
Apparel design with a vintage flair
Event promotion for retro festivals

Suggested color roles

primary

The bold Crimson, #DC143C, makes an excellent primary color for calls to action, important headers, or key graphical elements, drawing immediate attention.

secondary

The lively Hot Pink, #FF69B4, serves as a playful secondary color for accents, interactive elements, or backgrounds that need a burst of energy.

accent

The radiant Gold, #FFD700, is perfect for highlights, icons, or subtle decorative touches, adding a touch of sparkle and vintage charm.

background

The refreshing Light Blue, #ADD8E6, can serve as a clean and bright background, providing a cheerful canvas that allows other colors to stand out.

text

For optimal readability on lighter colors like #ADD8E6 or #FFD700, use the sophisticated Dark Slate Gray #2F4F4F or standard black (#000000). White text (#FFFFFF) is ideal for #DC143C and #2F4F4F.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #FFD700; it pairs best with very dark text like #2F4F4F or black.
White text (#FFFFFF) offers excellent readability on #DC143C and #2F4F4F, meeting WCAG AA standards.
Avoid using #FF69B4 as text on #DC143C due to low contrast and potential color-blindness issues.
Always check contrast ratios for interactive elements and small text sizes to ensure universal accessibility.

Recommended combinations

Diner Classic

Creates a strong, balanced retro aesthetic, perfect for main branding, website navigation, or print materials.

#DC143C · #ADD8E6 · #2F4F4F

Neon Pop

Ideal for playful accents, social media graphics, or designs that aim for a bright, energetic, and fun vintage vibe.

#FF69B4 · #FFD700 · #ADD8E6

Bold Contrast

Effective for creating high-impact calls to action, striking headers, or distinguishing important sections in UI design.

#2F4F4F · #DC143C · #FFD700

CSS variables

:root {
  --retro-soda-shop-1: #FF69B4;
  --retro-soda-shop-2: #ADD8E6;
  --retro-soda-shop-3: #FFD700;
  --retro-soda-shop-4: #DC143C;
  --retro-soda-shop-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-soda-shop": {
        1: "#FF69B4",
        2: "#ADD8E6",
        3: "#FFD700",
        4: "#DC143C",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#FF69B4

Color 2#ADD8E6

Color 3#FFD700

Color 4#DC143C

Color 5#2F4F4F

Accessibility

Contrast checker

1.7:1Fail

1.9:1Fail

3.4:1AA18

1.7:1Fail

1.1:1Fail

3.3:1AA18

5.8:1AA

1.9:1Fail

1.1:1Fail

3.6:1AA18

6.4:1AA

1.9:1Fail

3.3:1AA18

3.6:1AA18

1.8:1Fail

3.4:1AA18

5.8:1AA

6.4:1AA

1.8:1Fail

Similar palettes

More like Retro Soda Shop

Retro Soda Shop

See it in context.

Ready when you are.

Built with Retro Soda Shop.

How to use Retro Soda Shop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Diner Classic

Neon Pop

Bold Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Soda Shop