Palette

Vintage Snack Bar

Bright, cheerful colors of a classic vintage snack bar, evoking a sense of sweet nostalgia.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Snack Bar 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 Snack Bar.

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

Data visualization

#CC0000#FFD700#3CB371#87CEEB#FFFFFF

Palette guide

How to use Vintage Snack Bar

Overview

The Vintage Snack Bar palette is a bright, cheerful, and iconic collection, perfectly capturing the lively spirit of classic diners and retro eateries. This vibrant scheme features a bold #CC0000 red, an energetic #FFD700 yellow, and a refreshing #3CB371 green, offering a playful yet balanced primary set. The addition of a clear #87CEEB blue provides a cool counterpoint, while crisp #FFFFFF ensures cleanliness and contrast. Designers can leverage this palette to create fun, nostalgic branding, engaging web interfaces for food-related businesses, or eye-catching promotional materials that evoke a sense of sweet nostalgia and timeless American charm.

Best used for

Diner or restaurant branding
Retro food truck design
Event posters (carnivals, fairs)
Children's product packaging
Playful web or app interfaces
Pop art illustrations

Suggested color roles

primary

A classic, energetic red like #CC0000, perfect for strong calls-to-action, prominent logos, or focal points.

secondary

A bright, cheerful yellow like #FFD700, excellent for highlights, secondary buttons, or attention-grabbing elements.

accent

A fresh, lively green like #3CB371, offering a playful contrast and suitable for subtle accents or decorative details.

background

A crisp, clean white like #FFFFFF, providing a bright and neutral base that makes all other colors pop vividly.

text

Use the bold #CC0000 for headings and key messages. For body text, a standard black will ensure maximum readability against the #FFFFFF background.

Accessibility notes

Ensure #CC0000 and black text on #FFFFFF background meet WCAG AA contrast for readability.
Avoid placing #FFD700 text on #FFFFFF, as contrast will be extremely poor.
Use #87CEEB carefully for text; combine with a dark background or ensure large font sizes.
For interactive elements, consider outlines or bolder states to distinguish them, especially for color-blind users.

Recommended combinations

Classic Diner

White background with bold red and yellow for a vibrant, iconic diner feel.

#FFFFFF · #CC0000 · #FFD700

Retro Playful

Clean background with fresh green and blue accents, ideal for playful graphics or secondary information.

#FFFFFF · #3CB371 · #87CEEB

Bold Primary

Energetic color blocks, stripes, or graphical elements where all colors contribute equally to the vibrancy.

#CC0000 · #FFD700 · #3CB371

CSS variables

:root {
  --vintage-snack-bar-1: #CC0000;
  --vintage-snack-bar-2: #FFD700;
  --vintage-snack-bar-3: #3CB371;
  --vintage-snack-bar-4: #87CEEB;
  --vintage-snack-bar-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-snack-bar": {
        1: "#CC0000",
        2: "#FFD700",
        3: "#3CB371",
        4: "#87CEEB",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#CC0000

Color 2#FFD700

Color 3#3CB371

Color 4#87CEEB

Color 5#FFFFFF

Accessibility

Contrast checker

4.2:1AA18

2.2:1Fail

3.4:1AA18

5.9:1AA

4.2:1AA18

1.9:1Fail

1.2:1Fail

1.4:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

2.7:1Fail

3.4:1AA18

1.2:1Fail

1.5:1Fail

1.7:1Fail

5.9:1AA

1.4:1Fail

2.7:1Fail

1.7:1Fail

Similar palettes

More like Vintage Snack Bar