Back to palettes

Palette

Diner Milkshake Dream

Soft, whimsical pastels reminiscent of vintage diner decor and sweet milkshake flavors.

pastelretro5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F6EDDC#B6D9EF#F0C4DA#7FB0E0#E087B9

Palette guide

How to use Diner Milkshake Dream

Overview

The "Diner Milkshake Dream" palette is a soft, whimsical collection of pastels, perfectly evoking the nostalgic charm of vintage diner decor and sweet, creamy milkshake flavors. This array includes a warm, creamy off-white #F6EDDC, a light sky blue #B6D9EF, a delicate blush pink #F0C4DA, a deeper, calming blue #7FB0E0, and a richer rose pink #E087B9. Designers can leverage these gentle hues to create inviting and serene experiences, ideal for branding, digital interfaces, or print materials that aim to convey a sense of innocent comfort and lighthearted sweetness. It’s perfect for projects seeking a subtle, dreamy retro aesthetic.

Best used for

  • Branding for boutique cafes or vintage-inspired shops
  • Soft, inviting website designs (e.g., lifestyle, beauty)
  • Children's book illustrations or nursery decor
  • Packaging for artisanal treats or gentle skincare
  • Wedding stationery or baby shower invitations
  • UI/UX for calm, aesthetic-focused apps

Suggested color roles

primary

A charming, slightly deeper rose pink #E087B9 that provides a lovely anchor for the palette, ideal for main headings or key brand elements.

secondary

A serene, mid-tone blue #7FB0E0 that offers a calming presence. Excellent for secondary sections, backgrounds, or subtle interactive elements.

accent

A delicate blush pink #F0C4DA, perfect for soft highlights, decorative patterns, or subtle accents that add a touch of warmth.

background

A creamy, warm off-white #F6EDDC that serves as an excellent, gentle backdrop, allowing the pastel colors to harmonize beautifully.

text

While light, this sky blue #B6D9EF can be used for large decorative text or headlines on darker elements. For body text on #F6EDDC, a dark neutral like charcoal or black is highly recommended for readability.

Accessibility notes

  • Avoid using #F6EDDC (creamy off-white), #B6D9EF (light blue), or #F0C4DA (blush pink) for body text; their contrast is too low on most backgrounds.
  • For optimal readability, use a dark neutral color (e.g., charcoal or black) for body text, especially on #F6EDDC or #B6D9EF.
  • #E087B9 (rose pink) on #F6EDDC (creamy off-white) might pass for large text but verify contrast for smaller sizes.
  • Ensure there is sufficient visual separation and contrast when combining light pastels, particularly for interactive elements.

Recommended combinations

Soft Elegance

Branding for a sophisticated cafe, wedding stationery, or a serene lifestyle website.

#E087B9 · #7FB0E0 · #F6EDDC

Dreamy Pastels

Gentle illustrations, nursery decor, or packaging for delicate products.

#F0C4DA · #B6D9EF · #F6EDDC

Calm & Inviting

UI elements that need a soft, approachable feel, or subtle background patterns.

#7FB0E0 · #E087B9 · #F0C4DA

CSS variables

:root {
  --diner-milkshake-dream-1: #F6EDDC;
  --diner-milkshake-dream-2: #B6D9EF;
  --diner-milkshake-dream-3: #F0C4DA;
  --diner-milkshake-dream-4: #7FB0E0;
  --diner-milkshake-dream-5: #E087B9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-milkshake-dream": {
        1: "#F6EDDC",
        2: "#B6D9EF",
        3: "#F0C4DA",
        4: "#7FB0E0",
        5: "#E087B9",
      }
    }
  }
}

Related searches

pastel retro dinersweet light palettenostalgic milkshake colorssoft pink blue creamvintage elegant pastels

Palette colors

Hex values

Color 1#F6EDDC
·
Color 2#B6D9EF
·
Color 3#F0C4DA
·
Color 4#7FB0E0
·
Color 5#E087B9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.3:1Fail
2:1Fail
2.2:1Fail
2
1.3:1Fail
1:1Fail
1.5:1Fail
1.7:1Fail
3
1.3:1Fail
1:1Fail
1.5:1Fail
1.6:1Fail
4
2:1Fail
1.5:1Fail
1.5:1Fail
1.1:1Fail
5
2.2:1Fail
1.7:1Fail
1.6:1Fail
1.1:1Fail

Similar palettes

More like Diner Milkshake Dream

View all pastel