Back to palettes

Palette

Retro Sunset Diner

A playful and vibrant collection of reds, oranges, and blues that harks back to classic retro diners at sunset.

retroretro5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6B6B#FBB139#FFE383#2E86AB#00A8A8

Palette guide

How to use Retro Sunset Diner

Overview

The Retro Sunset Diner palette is a playful and vibrant collection, reminiscent of classic diners bathed in the warm glow of dusk. Featuring a lively Coral Red #FF6B6B, a cheerful Orange #FBB139, a radiant Light Yellow #FFE383, a deep Cerulean #2E86AB, and a refreshing Teal #00A8A8, this palette is perfect for designs that aim for a blend of vintage charm and energetic appeal. Designers can leverage these hues for dynamic branding, engaging user interfaces, or evocative illustrations. Developers will find these hex codes ideal for crafting consistent, stylish, and memorable digital experiences with a retro-modern edge.

Best used for

  • Vintage diner branding and menus
  • Retro-themed website interfaces
  • Children's book illustrations
  • Pop art style graphics
  • Event posters and flyers (retro theme)
  • Casual dining app design

Suggested color roles

primary

The lively Coral Red, #FF6B6B, serves as an energetic focal point for calls to action, main headers, or key graphical elements, demanding immediate attention.

secondary

The deep Cerulean, #2E86AB, offers a sophisticated contrast, ideal for navigation, sub-headers, or complementary sections, evoking a cool evening sky.

accent

The cheerful Orange, #FBB139, is a perfect accent for highlights, icons, or subtle decorative details, adding a warm pop and vintage charm.

background

The radiant Light Yellow, #FFE383, creates a soft, inviting background, reminiscent of a fading sunset, allowing other colors to stand out.

text

For optimal readability on lighter shades like #FFE383, use a dark color such as #2E86AB or standard black (#000000). White text (#FFFFFF) is highly effective on #FF6B6B, #2E86AB, and #00A8A8.

Accessibility notes

  • Ensure sufficient contrast between #FFE383 and #FBB139 if used for text; it will require large font sizes or bolder weights.
  • White text (#FFFFFF) on #FF6B6B, #2E86AB, and #00A8A8 will generally meet WCAG AA contrast standards.
  • Avoid using #FBB139 as text on #FFE383 due to low contrast; these are better for backgrounds and accents.
  • Always test all color combinations for contrast ratios, especially for critical information and interactive elements, to ensure universal accessibility.

Recommended combinations

Sunset Glow

Creates a warm, inviting retro aesthetic, ideal for branding, headers, or backgrounds that evoke a gentle evening mood.

#FF6B6B · #FBB139 · #FFE383

Diner Pop

Perfect for creating a high-contrast, energetic design, suitable for UI elements, data visualization, or striking illustrations.

#2E86AB · #00A8A8 · #FF6B6B

Bright Retro

Effective for drawing attention to key information, creating distinct sections, or adding a cheerful pop to more subdued layouts.

#FBB139 · #2E86AB · #FFE383

CSS variables

:root {
  --retro-sunset-diner-1: #FF6B6B;
  --retro-sunset-diner-2: #FBB139;
  --retro-sunset-diner-3: #FFE383;
  --retro-sunset-diner-4: #2E86AB;
  --retro-sunset-diner-5: #00A8A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-sunset-diner": {
        1: "#FF6B6B",
        2: "#FBB139",
        3: "#FFE383",
        4: "#2E86AB",
        5: "#00A8A8",
      }
    }
  }
}

Related searches

vintage diner color schemeretro sunset colorsplayful 1950s palettebright retro branding colorsmid-century diner aesthetic

Palette colors

Hex values

Color 1#FF6B6B
·
Color 2#FBB139
·
Color 3#FFE383
·
Color 4#2E86AB
·
Color 5#00A8A8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
1.5:1Fail
1.1:1Fail
2
1.5:1Fail
1.4:1Fail
2.2:1Fail
1.6:1Fail
3
2.2:1Fail
1.4:1Fail
3.2:1AA18
2.3:1Fail
4
1.5:1Fail
2.2:1Fail
3.2:1AA18
1.4:1Fail
5
1.1:1Fail
1.6:1Fail
2.3:1Fail
1.4:1Fail

Similar palettes

More like Retro Sunset Diner

View all retro