Back to palettes

Palette

Vanilla Milkshake Diner

Creamy, warm tones inspired by a classic vanilla milkshake in a nostalgic diner setting.

neutralretro5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F5E8C7#DCCFA8#C3B68A#A99D6B#90844D

Palette guide

How to use Vanilla Milkshake Diner

Overview

The Vanilla Milkshake Diner palette evokes a charming retro ambiance with its warm, creamy tones, perfect for nostalgic and inviting designs. Ranging from the light "#F5E8C7" to the deeper, earthy "#90844D", with balanced shades like "#DCCFA8" and "#A99D6B", this collection brings a vintage diner feel. Designers can use these colors for retro branding, cozy cafe interfaces, or classic e-commerce sites. Developers will find these hex codes excellent for crafting consistent, warm UI themes that transport users to a simpler era. This palette is ideal for projects seeking a friendly, comforting, and subtly vintage aesthetic, ensuring a delightful and memorable user experience.

Best used for

  • Retro diner or cafe branding
  • Vintage-themed websites
  • Food and beverage packaging
  • Nostalgic event invitations
  • Cozy blog designs
  • Classic car or antique shop sites

Suggested color roles

primary

#DCCFA8 - A warm, inviting cream, ideal for main headings, navigation bars, or prominent UI elements, establishing a friendly tone.

secondary

#C3B68A - A slightly deeper, more grounded cream-brown, suitable for subheadings, card backgrounds, or secondary content areas.

accent

#A99D6B - A rich, earthy brown-yellow, perfect for calls-to-action, important links, or decorative elements that need warmth.

background

#F5E8C7 - A very light, creamy yellow, providing a soft and inviting canvas for content, enhancing readability.

text

#90844D - A deep, warm brown that offers excellent contrast against lighter backgrounds, ideal for body text and important labels.

Accessibility notes

  • Ensure "#90844D" text on "#F5E8C7" background meets WCAG AA standards for readability.
  • Use "#A99D6B" or "#90844D" for interactive elements to guarantee sufficient contrast against lighter backgrounds.
  • Avoid using "#DCCFA8" or "#C3B68A" for small text if contrast is marginal; reserve for larger titles.
  • Maintain clear value differences when layering the various cream-brown tones to ensure visual separation.

Recommended combinations

Diner Base

Light background, dark readable text, and a warm primary color for a classic, inviting layout.

#F5E8C7 · #90844D · #DCCFA8

Vintage Depth

Layers of warm browns for hierarchical sections, borders, and subtle accentuation in UI components.

#DCCFA8 · #C3B68A · #A99D6B

Rich Contrast

A bold, dark base with light highlights and a rich accent, suitable for headers or prominent sections.

#90844D · #F5E8C7 · #A99D6B

CSS variables

:root {
  --vanilla-milkshake-diner-1: #F5E8C7;
  --vanilla-milkshake-diner-2: #DCCFA8;
  --vanilla-milkshake-diner-3: #C3B68A;
  --vanilla-milkshake-diner-4: #A99D6B;
  --vanilla-milkshake-diner-5: #90844D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vanilla-milkshake-diner": {
        1: "#F5E8C7",
        2: "#DCCFA8",
        3: "#C3B68A",
        4: "#A99D6B",
        5: "#90844D",
      }
    }
  }
}

Related searches

retro cream color palettevintage diner colorswarm brown neutral palettenostalgic food brandingclassic milkshake theme

Palette colors

Hex values

Color 1#F5E8C7
·
Color 2#DCCFA8
·
Color 3#C3B68A
·
Color 4#A99D6B
·
Color 5#90844D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.7:1Fail
2.2:1Fail
3.1:1AA18
2
1.3:1Fail
1.3:1Fail
1.8:1Fail
2.4:1Fail
3
1.7:1Fail
1.3:1Fail
1.3:1Fail
1.9:1Fail
4
2.2:1Fail
1.8:1Fail
1.3:1Fail
1.4:1Fail
5
3.1:1AA18
2.4:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Vanilla Milkshake Diner

View all neutral
Aged Snapshot Tones
Vintage Postcard Memories
Vintage Postcard Sepia
Vintage Postmark Hue
Vintage Record Shop
Vintage Travelogue Map