Palette

Retro Diner Blues

The iconic, cheerful colors of a 1950s American diner, vibrant and nostalgic.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#40E0D0#DC143C#F8F8F8#FFD700#000000

Palette guide

How to use Retro Diner Blues

Overview

The Retro Diner Blues palette captures the cheerful, iconic spirit of a 1950s American diner with its vibrant and nostalgic mix. Featuring a striking #40E0D0 (turquoise), bold #DC143C (crimson red), bright #F8F8F8 (off-white), energetic #FFD700 (gold), and grounding #000000 (black), this collection is perfect for lively, vintage-inspired designs. Developers and designers can use these colors to create engaging, retro-themed interfaces, branding, and content that evokes a sense of fun and timeless charm.

Best used for

Retro restaurant branding
Vintage product packaging
Playful event invitations
Nostalgic web designs
Children's toys and games
Pop culture merchandise

Suggested color roles

primary

#DC143C is excellent for main branding, attention-grabbing elements, or strong calls-to-action.

secondary

#40E0D0 provides a fresh supporting visual, ideal for interactive states, subheadings, or decorative accents.

accent

#FFD700 serves as a bright highlight for key information, call-to-action buttons, or energetic design bursts.

background

#F8F8F8 offers a clean, bright base, while #000000 creates a dramatic contrast for bold statements.

text

Use #000000 for optimal readability on light backgrounds like #F8F8F8; use #F8F8F8 for text on dark backgrounds.

Accessibility notes

#DC143C and #40E0D0 offer good contrast against #F8F8F8 and #000000 for text readability.
#FFD700 is a bright color; dark text (like #000000) is essential for optimal readability when used as a background.
Ensure sufficient contrast for all text, especially when using #40E0D0 for smaller elements or on busy backgrounds.
Prioritize clear contrast for interactive elements to guide users effectively and ensure usability.

Recommended combinations

Diner Classic

Ideal for menu design, classic signage, or creating a bold, traditional diner aesthetic.

#DC143C · #F8F8F8 · #000000

Retro Pop

Excellent for playful illustrations, UI accents, or designs requiring a vibrant, energetic feel.

#40E0D0 · #FFD700 · #DC143C

Bold Contrast

Perfect for striking headers, strong typography, or creating a modern retro look.

#000000 · #F8F8F8 · #40E0D0

CSS variables

:root {
  --retro-diner-blues-2-1: #40E0D0;
  --retro-diner-blues-2-2: #DC143C;
  --retro-diner-blues-2-3: #F8F8F8;
  --retro-diner-blues-2-4: #FFD700;
  --retro-diner-blues-2-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-blues-2": {
        1: "#40E0D0",
        2: "#DC143C",
        3: "#F8F8F8",
        4: "#FFD700",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#40E0D0

Color 2#DC143C

Color 3#F8F8F8

Color 4#FFD700

Color 5#000000

Accessibility

Contrast checker

3:1AA18

1.5:1Fail

1.2:1Fail

12.8:1AAA

3:1AA18

4.7:1AA

3.6:1AA18

4.2:1AA18

1.5:1Fail

4.7:1AA

1.3:1Fail

19.8:1AAA

1.2:1Fail

3.6:1AA18

1.3:1Fail

15:1AAA

12.8:1AAA

4.2:1AA18

19.8:1AAA

15:1AAA

Similar palettes

More like Retro Diner Blues