Back to palettes

Palette

Retro Diner Blues

Muted blues and greys conjure the classic, cool aesthetic of a 1950s American diner.

coolretro5 colors
More cool 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

#EFEFEF#BFC8D0#8A9CA9#5C7889#3A5463

Palette guide

How to use Retro Diner Blues

Overview

This Retro Diner Blues palette features a sophisticated range of muted blues and greys, conjuring the classic, cool aesthetic of a 1950s American diner. From the crisp #EFEFEF (off-white) to the deep #3A5463 (dark blue-gray), including #BFC8D0, #8A9CA9, and #5C7889, these colors provide a mature and understated vintage feel. Designers and developers will find this palette excellent for creating elegant, nostalgic interfaces, branding, and content that prioritizes readability, a timeless appeal, and a sense of calm sophistication.

Best used for

  • Vintage-inspired branding
  • Editorial layouts and publications
  • Sophisticated web design
  • Corporate reports and presentations
  • Calm mobile applications
  • Art and photography portfolios

Suggested color roles

primary

#3A5463 serves as the deepest tone, ideal for main elements, primary text, or strong structural components.

secondary

#5C7889 offers robust support for subheadings, borders, or distinct background sections.

accent

#BFC8D0 provides subtle highlights, interactive states, or gentle decorative elements.

background

#EFEFEF offers a clean, bright base, while #3A5463 creates a dark, grounding backdrop.

text

Use #3A5463 for optimal readability on light backgrounds like #EFEFEF; use #EFEFEF for text on dark backgrounds.

Accessibility notes

  • #3A5463 provides excellent contrast on #EFEFEF for text, ensuring high readability.
  • Be cautious with #BFC8D0 or #8A9CA9 for text on #EFEFEF due to potential low contrast; prefer darker shades.
  • Ensure all text-on-color combinations meet WCAG AA standards, especially for smaller font sizes.
  • Use sufficient contrast for interactive elements to ensure clear affordance and usability for all users.

Recommended combinations

Muted Depth

Ideal for elegant typography, clean layouts, or creating a sense of understated sophistication.

#3A5463 · #EFEFEF · #5C7889

Subtle Transition

Excellent for background gradients, layered UI elements, or adding subtle visual interest.

#BFC8D0 · #8A9CA9 · #5C7889

Classic Base

Perfect for content areas, main page structure, or creating a balanced, readable design.

#EFEFEF · #3A5463 · #8A9CA9

CSS variables

:root {
  --retro-diner-blues-1: #EFEFEF;
  --retro-diner-blues-2: #BFC8D0;
  --retro-diner-blues-3: #8A9CA9;
  --retro-diner-blues-4: #5C7889;
  --retro-diner-blues-5: #3A5463;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-blues": {
        1: "#EFEFEF",
        2: "#BFC8D0",
        3: "#8A9CA9",
        4: "#5C7889",
        5: "#3A5463",
      }
    }
  }
}

Related searches

muted retro palettecool vintage bluessophisticated grey blueclassic diner aestheticunderstated web colors

Palette colors

Hex values

Color 1#EFEFEF
·
Color 2#BFC8D0
·
Color 3#8A9CA9
·
Color 4#5C7889
·
Color 5#3A5463
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.1:1AA18
6.9:1AA
2
1.5:1Fail
1.7:1Fail
2.8:1Fail
4.7:1AA
3
2.5:1Fail
1.7:1Fail
1.6:1Fail
2.8:1Fail
4
4.1:1AA18
2.8:1Fail
1.6:1Fail
1.7:1Fail
5
6.9:1AA
4.7:1AA
2.8:1Fail
1.7:1Fail

Similar palettes

More like Retro Diner Blues

View all cool
Faded Denim Patina
Retro Diner Blues
Retro Kitchen Tile
Vintage Postcard Blue
Atomic Era Pulse
Denim Dream