Palette

Retro Diner Shake

A nostalgic nod to classic American diners with bold colors and a playful, milkshake vibe.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DC143C#F0E68C#2F4F4F#B0C4DE#FFB6C1

Palette guide

How to use Retro Diner Shake

Overview

The Retro Diner Shake palette offers a nostalgic nod to classic American diners, blending bold colors with a playful, milkshake-inspired vibe. This collection features a rich crimson (#DC143C), a soft pale goldenrod (#F0E68C), a deep dark slate gray (#2F4F4F), a serene light steel blue (#B0C4DE), and a sweet light pink (#FFB6C1). It's a charming mix that provides both depth and lightness, making it highly versatile for designers and developers aiming to evoke a sense of vintage sweetness and fun. Perfect for creating inviting and memorable experiences across digital and print media, this palette is genuinely useful for projects seeking a delightful retro twist.

Best used for

Dessert and ice cream shop branding
Charming cafe and bakery websites
Baby product packaging
Nostalgic stationery and greeting cards
Wedding invitations with a retro flair
Playful social media graphics

Suggested color roles

primary

Use #DC143C as a strong, inviting primary color for brand identity, key headings, or prominent features.

secondary

Employ #F0E68C or #B0C4DE for soft, complementary backgrounds, subheadings, or larger content blocks.

accent

Apply #FFB6C1 for delicate highlights, decorative elements, or interactive buttons to add a touch of sweetness.

background

A light #B0C4DE or a soft cream provides an airy background, while #2F4F4F can anchor sections with depth.

text

For optimal readability, use #2F4F4F for dark text on lighter backgrounds, and a crisp white on #DC143C or #2F4F4F.

Accessibility notes

Ensure #F0E68C (pale goldenrod) is always paired with dark text for sufficient contrast and readability.
Light pink (#FFB6C1) should be used carefully for text; it's best as an accent or with very large font sizes.
Test text contrast on #B0C4DE to ensure legibility, especially for smaller font sizes.
Always aim for WCAG AA standards, particularly with the lighter colors in the palette.

Recommended combinations

Shake & Cherry

Captures the classic diner dessert aesthetic with bold and sweet elements.

#DC143C · #FFB6C1 · #2F4F4F

Soft & Subtle

Ideal for creating gentle, airy designs with a delicate vintage charm.

#F0E68C · #B0C4DE · #FFB6C1

Grounded Contrast

Provides a strong, grounded look with vibrant accents, suitable for main sections.

#DC143C · #2F4F4F · #F0E68C

CSS variables

:root {
  --retro-diner-shake-1: #DC143C;
  --retro-diner-shake-2: #F0E68C;
  --retro-diner-shake-3: #2F4F4F;
  --retro-diner-shake-4: #B0C4DE;
  --retro-diner-shake-5: #FFB6C1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-shake": {
        1: "#DC143C",
        2: "#F0E68C",
        3: "#2F4F4F",
        4: "#B0C4DE",
        5: "#FFB6C1",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#F0E68C

Color 3#2F4F4F

Color 4#B0C4DE

Color 5#FFB6C1

Accessibility

Contrast checker

3.9:1AA18

1.8:1Fail

2.8:1Fail

3:1AA18

3.9:1AA18

7:1AA

1.4:1Fail

1.3:1Fail

1.8:1Fail

7:1AA

5:1AA

5.4:1AA

2.8:1Fail

1.4:1Fail

5:1AA

1.1:1Fail

3:1AA18

1.3:1Fail

5.4:1AA

1.1:1Fail

Similar palettes

More like Retro Diner Shake