Back to palettes

Palette

Milkshake Dream Diner

Whimsical and sweet colors reminiscent of a 1950s diner serving frosted milkshakes and cotton candy.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7D7DF#BFE2C2#FFEECB#9CD9F7#EE9A9C

Palette guide

How to use Milkshake Dream Diner

Overview

The Milkshake Dream Diner palette offers whimsical and sweet colors reminiscent of a 1950s diner. This pastel collection features soft pinks like #F7D7DF and #EE9A9C, a creamy yellow #FFEECB, a gentle mint green #BFE2C2, and a light sky blue #9CD9F7. Each hue contributes to a playful, retro, and light-hearted aesthetic. Designers and developers can use this palette to create charming, nostalgic, and inviting experiences. It's ideal for branding cafes, bakeries, children's products, or any digital interface that aims for a sweet, comforting, and playfully vintage feel.

Best used for

  • Sweet shop or bakery branding
  • Retro-themed cafes or restaurants
  • Children's clothing or toy design
  • Playful blog or personal websites
  • Wedding invitations with a vintage twist
  • Baby shower decor or announcements

Suggested color roles

primary

Use #F7D7DF as a soft, inviting base for main content areas or background sections, creating a gentle atmosphere.

secondary

Employ #9CD9F7 for supporting elements, sub-headers, or subtle dividers, adding a touch of serene blue.

accent

Apply #EE9A9C for delightful accents, small icons, or decorative elements to introduce a slightly deeper, charming pink.

background

Utilize #FFEECB as a creamy, light yellow background, providing a warm and soft canvas for the palette.

text

For optimal readability, use a dark gray or charcoal for body text. #EE9A9C can be used for headings on very light backgrounds.

Accessibility notes

  • For optimal readability, use dark text (e.g., charcoal or black) on all pastel backgrounds like #F7D7DF, #BFE2C2, #FFEECB, and #9CD9F7.
  • Avoid using light text on these pastel shades, as the contrast will be insufficient for most users, failing WCAG AA standards.
  • Ensure interactive elements have a clear focus state and sufficient contrast, as soft hues can sometimes blur distinctions.
  • Reserve #EE9A9C for larger headings or accents where its contrast against very light backgrounds is more likely to be sufficient.

Recommended combinations

Retro Sweet

Ideal for main content areas, backgrounds, and key headlines, creating a soft, inviting, and nostalgic feel.

#FFEECB · #F7D7DF · #EE9A9C

Diner Blend

Excellent for UI elements, illustrations, or distinct sections within a playful layout, maintaining a harmonious blend.

#BFE2C2 · #9CD9F7 · #F7D7DF

Pop Accent

Perfect for buttons, highlights, or decorative elements to add a touch of whimsy and a subtle visual emphasis.

#F7D7DF · #EE9A9C · #9CD9F7

CSS variables

:root {
  --milkshake-dream-diner-1: #F7D7DF;
  --milkshake-dream-diner-2: #BFE2C2;
  --milkshake-dream-diner-3: #FFEECB;
  --milkshake-dream-diner-4: #9CD9F7;
  --milkshake-dream-diner-5: #EE9A9C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "milkshake-dream-diner": {
        1: "#F7D7DF",
        2: "#BFE2C2",
        3: "#FFEECB",
        4: "#9CD9F7",
        5: "#EE9A9C",
      }
    }
  }
}

Related searches

pastel retro palette1950s diner colorssweet playful color schemevintage milkshake colorslight charming branding

Palette colors

Hex values

Color 1#F7D7DF
·
Color 2#BFE2C2
·
Color 3#FFEECB
·
Color 4#9CD9F7
·
Color 5#EE9A9C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.2:1Fail
1.6:1Fail
2
1.1:1Fail
1.2:1Fail
1.1:1Fail
1.5:1Fail
3
1.2:1Fail
1.2:1Fail
1.3:1Fail
1.9:1Fail
4
1.2:1Fail
1.1:1Fail
1.3:1Fail
1.4:1Fail
5
1.6:1Fail
1.5:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Milkshake Dream Diner

View all pastel
Candy Cloud Fluff
Candy Floss Cloud
Candy Shop Whimsy
Diner Dream Shake
Dreamy Cloud Swirl
Fairy Floss Swirl