Palette

Route Sixty-Six

A nostalgic trip down memory lane, featuring the iconic teal, red, and cream of classic roadside diners.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Route Sixty-Six 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 Route Sixty-Six.

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

Data visualization

#2C6B7B#E24F4F#F4EEDC#7F8D9A#9F8E7D

Palette guide

How to use Route Sixty-Six

Overview

The Route Sixty-Six palette offers a nostalgic trip with its retro-inspired hues, perfect for designs evoking vintage charm and Americana. Anchored by the distinctive teal #2C6B7B and the bold red #E24F4F, it captures the essence of classic roadside diners and signage. The creamy #F4EEDC provides a warm, inviting base, while the subdued #7F8D9A and #9F8E7D introduce earthy, aged tones that ground the palette. This collection is ideal for projects aiming for a playful yet sophisticated retro aesthetic, from branding and editorial layouts to web interfaces and product design. It skillfully balances vibrant accents with muted foundations, ensuring versatility.

Best used for

Retro-themed branding and logos
Diner or vintage restaurant menus
Classic car club websites
Apparel designs with a 50s/60s vibe
Nostalgic event promotions
Editorial layouts for history or travel magazines

Suggested color roles

primary

Utilize #2C6B7B as a foundational brand color, evoking a sense of classic coolness.

secondary

Deploy #E24F4F for high-impact accents, call-to-actions, or striking headers.

accent

Employ #9F8E7D for subtle details, borders, or secondary interactive elements.

background

The creamy #F4EEDC serves as an excellent, warm neutral background.

text

Dark charcoal or black text provides strong contrast. #2C6B7B can also be used for headings on light backgrounds.

Accessibility notes

Ensure high contrast when pairing #E24F4F text on #2C6B7B backgrounds and vice-versa.
The creamy #F4EEDC offers good contrast for dark text but avoid light text on it.
Be mindful of contrast between #7F8D9A and #9F8E7D if used adjacently for critical information.
Always verify color combinations meet WCAG AA standards for readability, especially for body text.

Recommended combinations

Diner Classic

Perfect for main branding, hero sections, or a strong retro aesthetic in UI.

#2C6B7B · #E24F4F · #F4EEDC

Roadside Muted

Use for backgrounds, secondary details, or elements needing a softer, aged feel.

#7F8D9A · #9F8E7D · #F4EEDC

Vintage Pop

Ideal for bold headlines, graphic elements, or call-to-actions that demand attention.

#E24F4F · #2C6B7B · #7F8D9A

CSS variables

:root {
  --route-sixty-six-1: #2C6B7B;
  --route-sixty-six-2: #E24F4F;
  --route-sixty-six-3: #F4EEDC;
  --route-sixty-six-4: #7F8D9A;
  --route-sixty-six-5: #9F8E7D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "route-sixty-six": {
        1: "#2C6B7B",
        2: "#E24F4F",
        3: "#F4EEDC",
        4: "#7F8D9A",
        5: "#9F8E7D",
      }
    }
  }
}

Hex values

Color 1#2C6B7B

Color 2#E24F4F

Color 3#F4EEDC

Color 4#7F8D9A

Color 5#9F8E7D

Accessibility

Contrast checker

1.6:1Fail

5.2:1AA

1.8:1Fail

1.9:1Fail

1.6:1Fail

3.3:1AA18

1.1:1Fail

1.2:1Fail

5.2:1AA

3.3:1AA18

2.9:1Fail

2.7:1Fail

1.8:1Fail

1.1:1Fail

2.9:1Fail

1.1:1Fail

1.9:1Fail

1.2:1Fail

2.7:1Fail

1.1:1Fail

Similar palettes

More like Route Sixty-Six

Route Sixty-Six

See it in context.

Ready when you are.

Built with Route Sixty-Six.

How to use Route Sixty-Six

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Diner Classic

Roadside Muted

Vintage Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Route Sixty-Six