Palette

Diner Booth Teal

Bright, inviting colors reminiscent of classic 1950s American diners and their iconic teal booths.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Diner Booth Teal 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 Booth Teal.

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

Data visualization

#F9F7E8#A3D8D7#53ACA9#EE5C5F#3F4C4F

Palette guide

How to use Diner Booth Teal

Overview

The "Diner Booth Teal" palette offers a refreshing take on vintage aesthetics, perfectly capturing the inviting charm of classic 1950s American diners. This collection blends soothing teals like #A3D8D7 and #53ACA9 with a warm, creamy off-white #F9F7E8, grounding them with a deep charcoal #3F4C4F. A vibrant coral accent, #EE5C5F, adds a playful pop, reminiscent of a cherry on top. This palette is ideal for designers seeking to evoke a sense of playful nostalgia, offering a balanced mix of calming cool tones and energetic warmth. It's versatile for both digital interfaces and physical branding, providing a sophisticated yet approachable retro feel.

Best used for

Vintage-inspired cafe or restaurant branding
Retro e-commerce websites (e.g., clothing, decor)
Event branding for 50s-themed parties
Packaging for artisanal food or beverages
UI/UX design for lifestyle apps
Interior design concepts for a retro space

Suggested color roles

primary

A mid-tone teal #53ACA9 that anchors the palette, excellent for main sections, large buttons, or key branding elements, conveying a sense of calm reliability.

secondary

This vibrant coral #EE5C5F provides a lively and playful contrast. Perfect for calls-to-action, highlights, or illustrative details that need to grab attention.

accent

A lighter, airy teal #A3D8D7 that can be used for secondary accents, subtle gradients, or decorative patterns, adding a fresh touch.

background

A soft, creamy off-white #F9F7E8 that serves as an excellent clean background, allowing the more vibrant colors to truly pop while maintaining a vintage feel.

text

A deep, sophisticated charcoal #3F4C4F that ensures excellent readability against lighter backgrounds, providing a strong, classic text color.

Accessibility notes

Ensure #EE5C5F (coral) text has sufficient contrast if placed on #F9F7E8 or #A3D8D7; generally best for larger headings or accents.
#3F4C4F (charcoal) on #F9F7E8 offers excellent contrast for body text.
Avoid placing #A3D8D7 text directly on #F9F7E8 as the contrast will be too low for readability.
Use #53ACA9 for backgrounds where #3F4C4F text would provide good contrast.

Recommended combinations

Classic Teal & Coral

Core branding for a retro diner, striking a balance between inviting and playful.

#53ACA9 · #EE5C5F · #F9F7E8

Subtle Vintage

Backgrounds and text for a softer, more elegant retro aesthetic, like a vintage blog.

#A3D8D7 · #3F4C4F · #F9F7E8

Bold Contrast

UI elements that need high impact, such as important notifications or interactive buttons.

#3F4C4F · #EE5C5F · #53ACA9

CSS variables

:root {
  --diner-booth-teal-1: #F9F7E8;
  --diner-booth-teal-2: #A3D8D7;
  --diner-booth-teal-3: #53ACA9;
  --diner-booth-teal-4: #EE5C5F;
  --diner-booth-teal-5: #3F4C4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-booth-teal": {
        1: "#F9F7E8",
        2: "#A3D8D7",
        3: "#53ACA9",
        4: "#EE5C5F",
        5: "#3F4C4F",
      }
    }
  }
}

Hex values

Color 1#F9F7E8

Color 2#A3D8D7

Color 3#53ACA9

Color 4#EE5C5F

Color 5#3F4C4F

Accessibility

Contrast checker

1.5:1Fail

2.5:1Fail

3.1:1AA18

8.3:1AAA

1.5:1Fail

1.7:1Fail

2.1:1Fail

5.7:1AA

2.5:1Fail

1.7:1Fail

1.2:1Fail

3.3:1AA18

3.1:1AA18

2.1:1Fail

1.2:1Fail

2.7:1Fail

8.3:1AAA

5.7:1AA

3.3:1AA18

2.7:1Fail

Similar palettes

More like Diner Booth Teal

Abstract Geometric Hue

Amusement Pier Neon

Art Studio Chaos