Back to palettes

Palette

Midcentury Mod Vibe

A stylish nod to mid-century design, featuring muted teals, soft purples, and warm pinks.

CoolRetro5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midcentury Mod Vibe 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 Midcentury Mod Vibe.

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

Data visualization

#0C424B#E0BBE4#957DAD#FFC0CB#A7D9DE

Palette guide

How to use Midcentury Mod Vibe

Overview

The Midcentury Mod Vibe palette offers a stylish nod to mid-century design, featuring a sophisticated deep teal #0C424B, soft lavender #E0BBE4, muted purple #957DAD, playful pink #FFC0CB, and a calming light teal #A7D9DE. This palette is perfect for designers seeking a balance between modern sophistication and playful retro charm. The deep, grounding teal provides a strong anchor, while the lighter purples and pinks add a whimsical touch. It's an excellent choice for branding, web interfaces, or print materials that aim to be both elegant and inviting, suitable for a wide range of creative and commercial projects that embrace a clean, yet expressive, aesthetic.

Best used for

  • Modern retro branding and logos
  • Interior design inspiration websites
  • Fashion or beauty e-commerce platforms
  • Creative agency portfolios
  • Digital art and illustration with a chic feel
  • Event branding for stylish gatherings

Suggested color roles

primary

Use #0C424B as a strong primary for foundational elements, headers, or sophisticated branding.

secondary

Apply #957DAD for supporting content, subheadings, or to introduce a muted depth.

accent

Introduce #FFC0CB as a playful accent for calls-to-action, interactive elements, or visual highlights.

background

Employ #E0BBE4 or #A7D9DE for light, airy backgrounds, providing a soft canvas for content.

text

Utilize a dark charcoal or black for primary body text, ensuring readability against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when placing dark text on #E0BBE4 or #A7D9DE.
  • White text provides good contrast on #0C424B and #957DAD for headlines, but check for body text size.
  • Avoid using #FFC0CB for small text, as its lightness can make it hard to read against many backgrounds.
  • For critical information, use #0C424B or black on the lightest shades for best legibility.

Recommended combinations

Mod Elegance

Ideal for striking headers, brand statements, or sections needing a sophisticated pop.

#0C424B · #E0BBE4 · #FFC0CB

Soft Play

Excellent for background patterns, subtle UI elements, or content sections needing a calm feel.

#A7D9DE · #957DAD · #E0BBE4

Dynamic Retro

Creates a vibrant yet grounded look for calls-to-action, infographics, or playful branding.

#FFC0CB · #0C424B · #957DAD

CSS variables

:root {
  --midcentury-mod-vibe-1: #0C424B;
  --midcentury-mod-vibe-2: #E0BBE4;
  --midcentury-mod-vibe-3: #957DAD;
  --midcentury-mod-vibe-4: #FFC0CB;
  --midcentury-mod-vibe-5: #A7D9DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midcentury-mod-vibe": {
        1: "#0C424B",
        2: "#E0BBE4",
        3: "#957DAD",
        4: "#FFC0CB",
        5: "#A7D9DE",
      }
    }
  }
}

Related searches

midcentury modern color schemeretro teal purple pinkplayful sophisticated palettemod design colorscool retro vibe branding

Palette colors

Hex values

Color 1#0C424B
·
Color 2#E0BBE4
·
Color 3#957DAD
·
Color 4#FFC0CB
·
Color 5#A7D9DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
6.5:1AA
3.1:1AA18
7.2:1AAA
7.2:1AAA
2
6.5:1AA
2.1:1Fail
1.1:1Fail
1.1:1Fail
3
3.1:1AA18
2.1:1Fail
2.3:1Fail
2.3:1Fail
4
7.2:1AAA
1.1:1Fail
2.3:1Fail
1:1Fail
5
7.2:1AAA
1.1:1Fail
2.3:1Fail
1:1Fail

Similar palettes

More like Midcentury Mod Vibe

View all Cool