Palette

Soda Fountain Pop

Bright pinks, light blues, and neutrals bring to mind a cheerful 1950s soda fountain.

playfulretro5 colors

More playful 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

#FFEDED#FFC8D6#ADD8E6#7AC0DB#C0C0C0

Palette guide

How to use Soda Fountain Pop

Overview

The Soda Fountain Pop palette (version 2) delivers a cheerful, retro vibe with its delightful mix of pastel pinks, blues, and a soft neutral. Featuring the creamy #FFEDED, playful #FFC8D6, serene #ADD8E6, and vibrant #7AC0DB, all grounded by the subtle #C0C0C0, this scheme is a nostalgic nod to classic 1950s diners. Designers and developers can utilize these colors to evoke a sense of fun, lightheartedness, and vintage charm. It's perfect for creating engaging user interfaces, lively branding, and whimsical digital experiences that stand out with a distinctively retro flair, ensuring a memorable and inviting aesthetic.

Best used for

Retro-themed websites and mobile apps
Children's product branding or toy design
Casual dining or dessert shop identities
Playful marketing campaigns and social media
Event invitations with a vintage flair
Creative portfolios seeking a unique, cheerful style

Suggested color roles

primary

Use #FFEDED as a soft, inviting background, providing a clean canvas for other vibrant elements.

secondary

Apply #ADD8E6 for main content blocks or navigation, offering a cool, calming contrast to the warmer pinks.

accent

Incorporate #FFC8D6 for playful highlights, call-to-action buttons, or decorative elements, adding a sweet, cheerful pop.

background

Utilize #FFEDED for a light, airy base that embodies the creamy feel of a soda float.

text

For most elements, a dark charcoal or #2C2C2C provides excellent contrast. #7AC0DB can be used for headings on light backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing colors like #FFC8D6 with #FFEDED; they may not meet WCAG AA for text.
Use #7AC0DB or a dark neutral (e.g., charcoal) for text on #FFEDED or #ADD8E6 backgrounds for readability.
Avoid using #FFC8D6 as a text color on light backgrounds; it's best for accents or larger decorative elements.
The neutral #C0C0C0 provides a good base for dark text and can be used for subtle separators.

Recommended combinations

Diner Classic

A quintessential retro combination: #FFEDED as a creamy background, #7AC0DB for bold elements, and #FFC8D6 for sweet highlights.

#FFEDED · #7AC0DB · #FFC8D6

Soft & Playful

Create gentle, inviting layouts. #FFC8D6 for primary elements, #ADD8E6 for secondary, and #C0C0C0 for grounding details.

#FFC8D6 · #ADD8E6 · #C0C0C0

Cool Contrast

Use #ADD8E6 as a dominant cool background, with #FFEDED for clean sections and #7AC0DB for strong, vibrant calls-to-action.

#ADD8E6 · #FFEDED · #7AC0DB

CSS variables

:root {
  --soda-fountain-pop-2-1: #FFEDED;
  --soda-fountain-pop-2-2: #FFC8D6;
  --soda-fountain-pop-2-3: #ADD8E6;
  --soda-fountain-pop-2-4: #7AC0DB;
  --soda-fountain-pop-2-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soda-fountain-pop-2": {
        1: "#FFEDED",
        2: "#FFC8D6",
        3: "#ADD8E6",
        4: "#7AC0DB",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#FFEDED

Color 2#FFC8D6

Color 3#ADD8E6

Color 4#7AC0DB

Color 5#C0C0C0

Accessibility

Contrast checker

1.3:1Fail

1.4:1Fail

1.8:1Fail

1.6:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Soda Fountain Pop

Soda Fountain Pop

See it in context.

Ready when you are.

Built with Soda Fountain Pop.

How to use Soda Fountain Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Diner Classic

Soft & Playful

Cool Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Soda Fountain Pop