Back to palettes

Palette

Mid-Century Mod Hues

Warm, sophisticated browns and oranges inspired by the iconic and chic designs of the mid-20th century.

retroretro5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mid-Century Mod Hues 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 Mod Hues.

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

Data visualization

#5A2E33#B85F45#E5875B#FFC18B#FFEAC9

Palette guide

How to use Mid-Century Mod Hues

Overview

The Mid-Century Mod Hues palette offers warm, sophisticated browns and oranges, inspired by the iconic and chic designs of the mid-20th century. This collection features a beautiful gradient from the deep #5A2E33 to the inviting #FFEAC9, with vibrant mid-tones like #E5875B. Designers and developers can leverage this palette to create elegant vintage branding, upscale retro interiors, and sophisticated web designs. It's perfect for projects aiming to convey a sense of classic warmth, timeless style, and refined elegance, reminiscent of chic 1960s decor and fashion.

Best used for

  • Elegant vintage branding and luxury products
  • Upscale retro interior design concepts
  • Sophisticated fashion and lifestyle websites
  • Gourmet food and beverage packaging
  • Classic web design with a warm, inviting feel
  • Autumnal themes and seasonal marketing campaigns

Suggested color roles

primary

#5A2E33 - A rich, deep brown, serving as a strong, sophisticated foundation for branding, large backgrounds, or primary text.

secondary

#B85F45 - A warm, earthy orange, ideal for supporting sections, headers, or graphic accents that add depth.

accent

#E5875B - A brighter, inviting orange, excellent for highlights, calls to action, or decorative patterns that draw the eye.

background

#FFEAC9 - A soft, warm cream, providing a clean, elegant, and inviting backdrop for content.

text

#5A2E33 - The deep brown, ensuring excellent readability for primary body text on light backgrounds, maintaining sophistication.

Accessibility notes

  • Ensure #5A2E33 text on #FFEAC9 provides optimal contrast, meeting WCAG AA or AAA standards.
  • #B85F45 and #E5875B can be used for headings on #FFEAC9, offering good visibility.
  • Avoid using #FFC18B for small text on #FFEAC9 due to potential low contrast; best for larger accents or graphics.
  • Verify all interactive elements have sufficient contrast against their backgrounds for clear user interaction.

Recommended combinations

Retro Gradient

A smooth transition from deep brown to mid-orange with a light cream background for elegance.

#5A2E33 · #E5875B · #FFEAC9

Warm Sunset

Combining earthy orange, light orange, and cream for a soft, inviting, and warm aesthetic.

#B85F45 · #FFC18B · #FFEAC9

Chic Contrast

Layering of dark to mid-tones for a rich, sophisticated look with subtle, warm transitions.

#5A2E33 · #B85F45 · #E5875B

CSS variables

:root {
  --mid-century-mod-hues-1: #5A2E33;
  --mid-century-mod-hues-2: #B85F45;
  --mid-century-mod-hues-3: #E5875B;
  --mid-century-mod-hues-4: #FFC18B;
  --mid-century-mod-hues-5: #FFEAC9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mid-century-mod-hues": {
        1: "#5A2E33",
        2: "#B85F45",
        3: "#E5875B",
        4: "#FFC18B",
        5: "#FFEAC9",
      }
    }
  }
}

Related searches

mid-century brown orangewarm retro palettevintage sophisticated colorselegant 1960s designchic autumnal hues

Palette colors

Hex values

Color 1#5A2E33
·
Color 2#B85F45
·
Color 3#E5875B
·
Color 4#FFC18B
·
Color 5#FFEAC9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
4.2:1AA18
7.1:1AAA
9.5:1AAA
2
2.5:1Fail
1.7:1Fail
2.8:1Fail
3.8:1AA18
3
4.2:1AA18
1.7:1Fail
1.7:1Fail
2.2:1Fail
4
7.1:1AAA
2.8:1Fail
1.7:1Fail
1.3:1Fail
5
9.5:1AAA
3.8:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Mid-Century Mod Hues

View all retro