Palette

Mid-century Sunset

Captures the sophisticated warmth of a mid-century sunset, blending earthy oranges with muted browns.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mid-century Sunset 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 Mid-century Sunset.

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

Data visualization

#E57A44#F2A365#F9C784#8D5A38#5A3F2C

Palette guide

How to use Mid-century Sunset

Overview

The Mid-century Sunset palette captures the sophisticated warmth of a bygone era, blending earthy oranges with muted browns to evoke a serene, vintage atmosphere. Designers can leverage the vibrant yet grounded feel of #E57A44 (burnt orange) and #F2A365 (soft coral) for impactful headers or call-to-action buttons, while the lighter #F9C784 (creamy apricot) provides an excellent backdrop. The deeper #8D5A38 and #5A3F2C offer rich, grounding tones for text and structural elements. This palette is ideal for projects seeking a nostalgic yet refined aesthetic, perfect for branding, web design, or editorial layouts that aim to convey comfort and classic style without being overtly retro.

Best used for

Vintage-inspired branding and logos
Home decor and interior design websites
Editorial layouts for lifestyle magazines
Restaurant menus with a rustic or retro theme
E-commerce sites for artisan goods
Digital art and illustration with a warm, nostalgic feel

Suggested color roles

primary

Use #E57A44 as a bold primary for accents and calls-to-action, drawing immediate attention.

secondary

Apply #F2A365 for supporting elements, subheadings, or secondary buttons, offering a softer complement.

accent

Highlight with #F9C784 for subtle emphasis, hover states, or decorative elements that need a touch of brightness.

background

Employ #F9C784 or a very light cream for main content areas, ensuring readability and a warm base.

text

Utilize #5A3F2C for primary body text, offering excellent readability against lighter backgrounds like #F9C784.

Accessibility notes

Ensure sufficient contrast between #5A3F2C text and #F9C784 background for WCAG AA compliance.
Avoid placing #E57A44 directly against #F2A365 for text, as their similar luminance may cause readability issues.
Use a dark text like #5A3F2C or even black on #E57A44 for larger headings, but check contrast for small text.
Consider using #8D5A38 or #5A3F2C for critical information when the background is #F2A365.

Recommended combinations

Warm Earth

Ideal for a cozy, inviting feel in headers or hero sections, with #E57A44 as a focal point.

#E57A44 · #8D5A38 · #F9C784

Sunset Glow

Excellent for body content or product descriptions, offering good contrast and a gentle warmth.

#F2A365 · #5A3F2C · #F9C784

Deep Retro

Creates a sophisticated, grounded look for footers, navigation, or branding elements.

#5A3F2C · #E57A44 · #8D5A38

CSS variables

:root {
  --mid-century-sunset-1: #E57A44;
  --mid-century-sunset-2: #F2A365;
  --mid-century-sunset-3: #F9C784;
  --mid-century-sunset-4: #8D5A38;
  --mid-century-sunset-5: #5A3F2C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mid-century-sunset": {
        1: "#E57A44",
        2: "#F2A365",
        3: "#F9C784",
        4: "#8D5A38",
        5: "#5A3F2C",
      }
    }
  }
}

Hex values

Color 1#E57A44

Color 2#F2A365

Color 3#F9C784

Color 4#8D5A38

Color 5#5A3F2C

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

2:1Fail

3.3:1AA18

1.4:1Fail

1.3:1Fail

2.8:1Fail

4.7:1AA

1.9:1Fail

1.3:1Fail

3.7:1AA18

6.2:1AA

2:1Fail

2.8:1Fail

3.7:1AA18

1.7:1Fail

3.3:1AA18

4.7:1AA

6.2:1AA

1.7:1Fail

Similar palettes

More like Mid-century Sunset

View all retro

Mid-Century Mod Comfort

Atomic Age Mod

Mid-Century Fabric Pop

Mid-Century Mod Warmth

Midcentury Lounge Vibes

Seventies Lounge Echo