Palette

Teal Diner

A classic retro palette combining vibrant teal with a bold red, evoking the timeless charm of 1950s diners.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#B22222#C0C0C0#F5F5DC#808080

Palette guide

How to use Teal Diner

Overview

The Teal Diner palette is a vibrant and nostalgic collection, perfectly capturing the timeless charm of 1950s diners. It features the classic #008080 teal, a bold #B22222 brick red, and the crisp #C0C0C0 silver. The warm #F5F5DC cream provides a comforting base, while the subdued #808080 gray offers balance. This palette is ideal for designers looking to evoke a retro, playful, yet sophisticated atmosphere. It's excellent for branding, web design, or marketing materials that aim to blend vintage aesthetics with a modern, clean feel, ensuring a memorable and engaging user experience.

Best used for

Restaurant and cafe branding
Retro-themed event invitations
Vintage apparel and merchandise
50s-inspired web design
Food packaging with a classic look
Pop art and illustration projects

Suggested color roles

primary

Use #008080 (Classic Teal) for dominant brand elements, large background sections, or primary navigation.

secondary

Apply #B22222 (Brick Red) for crucial calls-to-action, headlines, or to create a strong visual accent.

accent

Reserve #C0C0C0 (Silver) for metallic accents, dividers, or subtle interactive elements to add a touch of sparkle.

background

The light #F5F5DC (Cream) is ideal for clean, inviting backgrounds. #808080 (Medium Gray) can be used for secondary background areas or containers.

text

For text on #F5F5DC, use #008080 or a dark charcoal like #333333. For text on darker backgrounds, white or a very light cream is recommended.

Accessibility notes

Ensure sufficient contrast when pairing #B22222 with #F5F5DC for text; a darker shade of red might be needed for smaller text.
White text on #008080 and #B22222 provides good readability.
Avoid using #C0C0C0 or #808080 for body text on #F5F5DC without checking contrast ratios.
Use a dark primary color like #008080 for text on the cream background #F5F5DC for optimal readability.

Recommended combinations

Classic Diner

Excellent for website hero sections, menu designs, or branding that aims for a strong, recognizable retro diner aesthetic.

#F5F5DC · #008080 · #B22222

Silver Screen

Ideal for clean, metallic interfaces, tech-retro branding, or modern designs that incorporate a hint of vintage charm and sophistication.

#C0C0C0 · #008080 · #808080

Pop Art Punch

Use for bold posters, social media campaigns, or elements that need to pop with high contrast and a playful, artistic vibe.

#B22222 · #F5F5DC · #008080

CSS variables

:root {
  --teal-diner-1: #008080;
  --teal-diner-2: #B22222;
  --teal-diner-3: #C0C0C0;
  --teal-diner-4: #F5F5DC;
  --teal-diner-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-diner": {
        1: "#008080",
        2: "#B22222",
        3: "#C0C0C0",
        4: "#F5F5DC",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#008080

Color 2#B22222

Color 3#C0C0C0

Color 4#F5F5DC

Color 5#808080

Accessibility

Contrast checker

1.4:1Fail

2.6:1Fail

4.3:1AA18

1.2:1Fail

1.4:1Fail

3.7:1AA18

6:1AA

1.7:1Fail

2.6:1Fail

3.7:1AA18

1.6:1Fail

2.2:1Fail