Palette

Diner Dream Shake

A cheerful, nostalgic palette reminiscent of 1950s diners with their pastel booths and creamy milkshakes.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Diner Dream Shake 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 Diner Dream Shake.

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

Data visualization

#F5B0C2#A8D1B1#F0E68C#87CEEB#D3D3D3

Palette guide

How to use Diner Dream Shake

Overview

The "Diner Dream Shake" palette is a delightful collection of soft, playful pastels, perfectly capturing the whimsical and sweet nostalgia of 1950s diners. This cheerful array includes a delicate pink #F5B0C2, a soothing mint green #A8D1B1, a sunny cream yellow #F0E68C, and a serene sky blue #87CEEB. Grounded by a light, airy grey #D3D3D3, this palette creates a gentle yet inviting atmosphere. Designers can leverage these hues for projects that require a touch of innocent charm, from branding for sweet treats to soft, welcoming digital interfaces. It’s ideal for evoking a sense of dreamy comfort and lighthearted fun.

Best used for

Branding for bakeries, ice cream shops, or cafes
Children's clothing or toy design
Baby shower invitations and nursery decor
Soft, inviting website designs for lifestyle blogs
Packaging for confectionery or beauty products
Illustrations with a whimsical, dreamy aesthetic

Suggested color roles

primary

A sweet, inviting pink #F5B0C2, excellent for creating a friendly and approachable feel in branding, headers, or decorative elements.

secondary

This gentle mint green #A8D1B1 offers a refreshing contrast, perfect for secondary sections, backgrounds, or subtle accents that convey calm.

accent

A serene sky blue #87CEEB that adds a touch of cool lightness, ideal for highlights, small icons, or graphic elements to add visual interest.

background

A light, neutral grey #D3D3D3 that provides a clean, subtle base, allowing the pastel colors to appear soft and harmonious without overwhelming the design.

text

While light, this cream yellow #F0E68C can be used for very large headings or decorative text on darker elements within the palette. For body text, a dark grey or charcoal would be recommended for readability.

Accessibility notes

Avoid using #F0E68C (cream yellow) or #D3D3D3 (light grey) for body text; their contrast will be too low on most backgrounds.
For maximum readability, use a dark neutral color (e.g., charcoal or black) for body text, especially on #D3D3D3, #A8D1B1, or #F5B0C2.
#87CEEB (sky blue) text on #D3D3D3 (light grey) will likely have insufficient contrast for small text.
When combining pastels, ensure there is enough visual separation and contrast for elements to be distinct.

Recommended combinations

Sweet Treat Blend

Packaging for desserts, branding for a sweet shop, or playful event invitations.

#F5B0C2 · #A8D1B1 · #F0E68C

Dreamy Skies

Soft website backgrounds, nursery decor, or illustrations evoking calm and serenity.

#87CEEB · #D3D3D3 · #F5B0C2

Subtle Contrast

Decorative patterns, subtle UI elements, or illustrations where a gentle color play is desired.

#A8D1B1 · #F0E68C · #87CEEB

CSS variables

:root {
  --diner-dream-shake-1: #F5B0C2;
  --diner-dream-shake-2: #A8D1B1;
  --diner-dream-shake-3: #F0E68C;
  --diner-dream-shake-4: #87CEEB;
  --diner-dream-shake-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-dream-shake": {
        1: "#F5B0C2",
        2: "#A8D1B1",
        3: "#F0E68C",
        4: "#87CEEB",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#F5B0C2

Color 2#A8D1B1

Color 3#F0E68C

Color 4#87CEEB

Color 5#D3D3D3

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

1:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

Similar palettes

More like Diner Dream Shake

Diner Dream Shake

See it in context.

Ready when you are.

Built with Diner Dream Shake.

How to use Diner Dream Shake

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sweet Treat Blend

Dreamy Skies

Subtle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Diner Dream Shake