Back to palettes

Palette

Retro Diner Blues

Cool blues reminiscent of a classic 50s diner, evoking a sense of calm nostalgia.

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

#4A90E2#8BB7E9#D0E1F4#337ABE#6EADD0

Palette guide

How to use Retro Diner Blues

Overview

The Retro Diner Blues palette offers a serene collection of cool blues, reminiscent of a classic 1950s diner, evoking calm nostalgia. With shades like deep #4A90E2, lighter #8BB7E9, airy #D0E1F4, robust #337ABE, and tranquil #6EADD0, this palette is ideal for creating a soothing yet vintage atmosphere. Designers and developers can utilize these harmonious tones for elegant interfaces, gentle branding, and sophisticated retro themes that prioritize comfort and clarity, perfect for a refined and welcoming digital presence.

Best used for

  • Vintage-inspired cafes and eateries
  • Wellness and meditation apps
  • Educational platforms and content
  • Corporate branding with a gentle touch
  • Serene web designs
  • Nostalgic product packaging

Suggested color roles

primary

#337ABE serves as the main brand color, providing a sturdy yet calming presence for key elements.

secondary

#4A90E2 offers strong supporting visuals for interactive states, subheadings, or distinct content blocks.

accent

#6EADD0 provides subtle highlights, gentle call-to-actions, or decorative elements without overpowering.

background

#D0E1F4 offers a light, airy base, while #4A90E2 can create a deeper, calming backdrop.

text

Use #337ABE for clear readability on light backgrounds like #D0E1F4; a light gray or white works well on darker blues.

Accessibility notes

  • Ensure darker blues (#337ABE, #4A90E2) provide sufficient contrast for text on lighter blues (#D0E1F4, #8BB7E9).
  • Avoid using lighter blues for small text on similar light blue backgrounds due to potential low contrast.
  • Text on #D0E1F4 should ideally be #337ABE or a dark neutral for optimal readability and WCAG compliance.
  • Always test all text and interactive elements for WCAG AA compliance to ensure broad usability.

Recommended combinations

Calm Gradient

Ideal for subtle backgrounds, smooth transitions, or layered UI elements.

#4A90E2 · #8BB7E9 · #D0E1F4

Deep & Light

Excellent for headers, information hierarchy, or creating a sense of depth.

#337ABE · #D0E1F4 · #6EADD0

Accented Blue

Perfect for UI elements, decorative patterns, or adding a gentle focal point.

#8BB7E9 · #6EADD0 · #4A90E2

CSS variables

:root {
  --retro-diner-blues-3-1: #4A90E2;
  --retro-diner-blues-3-2: #8BB7E9;
  --retro-diner-blues-3-3: #D0E1F4;
  --retro-diner-blues-3-4: #337ABE;
  --retro-diner-blues-3-5: #6EADD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-blues-3": {
        1: "#4A90E2",
        2: "#8BB7E9",
        3: "#D0E1F4",
        4: "#337ABE",
        5: "#6EADD0",
      }
    }
  }
}

Related searches

cool blue paletteretro blue themevintage diner colorscalm nostalgic designharmonious blue scheme

Palette colors

Hex values

Color 1#4A90E2
·
Color 2#8BB7E9
·
Color 3#D0E1F4
·
Color 4#337ABE
·
Color 5#6EADD0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
1.4:1Fail
1.3:1Fail
2
1.6:1Fail
1.6:1Fail
2.2:1Fail
1.2:1Fail
3
2.5:1Fail
1.6:1Fail
3.4:1AA18
1.8:1Fail
4
1.4:1Fail
2.2:1Fail
3.4:1AA18
1.8:1Fail
5
1.3:1Fail
1.2:1Fail
1.8:1Fail
1.8: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