Palette

Soda Fountain Pop

A lively blend evoking classic American diners with bright reds, cool teals, and creamy accents.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soda Fountain 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 Soda Fountain Pop.

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

Data visualization

#e0e0e0#cc2e3b#4aa5a5#ffe4e1#303030

Palette guide

How to use Soda Fountain Pop

Overview

The Soda Fountain Pop palette (original) blends classic American diner aesthetics with a lively, contrasting flair. Featuring the creamy neutral #ffe4e1, cool #e0e0e0, and deep #303030, alongside the vibrant #cc2e3b and refreshing #4aa5a5, this scheme is perfect for capturing a playful yet vintage mood. Designers and developers can leverage these colors to create engaging interfaces, cheerful branding, and nostalgic digital experiences. It’s an ideal choice for projects aiming to evoke a sense of retro fun and familiarity, ensuring a memorable and inviting visual presence across web and print media.

Best used for

Retro-themed restaurants and cafes
Vintage-inspired e-commerce sites
Playful event branding and invitations
Children's entertainment platforms
Creative portfolios with a unique style
Product packaging aiming for a nostalgic feel

Suggested color roles

primary

Use #303030 as a strong, grounding base for headers, footers, or primary typography, providing depth and contrast.

secondary

Apply #e0e0e0 for main content backgrounds or card elements, offering a clean, light foundation.

accent

Incorporate #cc2e3b for impactful call-to-action buttons, alerts, or key highlights, drawing immediate attention.

background

Utilize #ffe4e1 for a warm, creamy background that sets a soft, inviting tone, reminiscent of a vanilla milkshake.

text

For light backgrounds, #303030 or black ensures excellent readability. For dark backgrounds, #ffe4e1 or white works well.

Accessibility notes

Ensure #303030 text on #e0e0e0 or #ffe4e1 backgrounds meets WCAG AAA for optimal legibility.
The vibrant #cc2e3b and #4aa5a5 should be used with sufficient contrast for text, preferably on very light or very dark backgrounds.
Avoid using #ffe4e1 for body text on #e0e0e0 due to insufficient contrast; it's best for backgrounds or large decorative elements.
When using #4aa5a5 as a background, pair it with #303030 or #ffe4e1 for accessible text.

Recommended combinations

Diner Pop

A classic retro combo: #ffe4e1 as a creamy base, #cc2e3b for vibrant highlights, and #4aa5a5 for cool, balancing accents.

#FFE4E1 · #CC2E3B · #4AA5A5

Bold Contrast

Effective for strong statements: #303030 for a dark background, #e0e0e0 for clean text, and #cc2e3b for critical calls-to-action.

#303030 · #E0E0E0 · #CC2E3B

Vintage Teal

Create a cool, clean aesthetic: #e0e0e0 as a background, #4aa5a5 for prominent elements, and #303030 for text and details.

#E0E0E0 · #4AA5A5 · #303030

CSS variables

:root {
  --soda-fountain-pop-1: #e0e0e0;
  --soda-fountain-pop-2: #cc2e3b;
  --soda-fountain-pop-3: #4aa5a5;
  --soda-fountain-pop-4: #ffe4e1;
  --soda-fountain-pop-5: #303030;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soda-fountain-pop": {
        1: "#e0e0e0",
        2: "#cc2e3b",
        3: "#4aa5a5",
        4: "#ffe4e1",
        5: "#303030",
      }
    }
  }
}

Hex values

Color 1#e0e0e0

Color 2#cc2e3b

Color 3#4aa5a5

Color 4#ffe4e1

Color 5#303030

Accessibility

Contrast checker

4:1AA18

2.2:1Fail

1.1:1Fail

10:1AAA

4:1AA18

1.8:1Fail

4.3:1AA18

2.5:1Fail