Back to palettes

Palette

Midcentury Mint Kiss

A charming blast from the past, combining soft mint and blush tones for a delightful vintage feel.

pastelretro5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midcentury Mint Kiss 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 Mint Kiss.

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

Data visualization

#F08080#B0E0E6#F5F5DC#ADD8E6#D8BFD8

Palette guide

How to use Midcentury Mint Kiss

Overview

The Midcentury Mint Kiss palette is a charming and sweet collection, offering a delightful vintage feel. It combines a soft coral #F08080, serene mint #B0E0E6, creamy off-white #F5F5DC, light blue #ADD8E6, and a dusty lavender #D8BFD8. This palette is perfect for designers aiming for a nostalgic yet fresh aesthetic, evoking the innocence and charm of mid-century pastels. The harmonious blend of cool blues and warm pinks creates a balanced and inviting atmosphere, making it ideal for projects that require a gentle, approachable, and subtly playful touch. It's excellent for branding, web design, or print materials that want to feel both retro and modern.

Best used for

  • Boutique ice cream or confectionery branding
  • Baby and children's product design
  • Vintage-inspired fashion or beauty websites
  • Wedding planning and stationery design
  • Sweet shop or cafe interior design
  • Personal blogs with a whimsical or nostalgic theme

Suggested color roles

primary

Use #F08080 as a soft primary for calls-to-action or key playful accents, drawing gentle attention.

secondary

Apply #B0E0E6 for supporting elements, background panels, or subtle data visualizations.

accent

Introduce #D8BFD8 as a charming accent for decorative details, borders, or hover states.

background

Employ #F5F5DC for main content areas, providing a clean, warm, and inviting base.

text

Utilize a dark grey or charcoal for primary body text, ensuring readability against the light pastels.

Accessibility notes

  • Ensure sufficient contrast for text, especially when pairing dark text with #F5F5DC or #ADD8E6.
  • Avoid light text on #F08080, #B0E0E6, or #D8BFD8; always opt for dark text for legibility.
  • The pastel nature requires careful contrast checks for all text and interactive elements to meet WCAG standards.
  • For critical information, use a very dark color like black or charcoal on #F5F5DC.

Recommended combinations

Sweet Harmony

Ideal for cheerful headers, playful illustrations, or sections needing a gentle pop of color.

#F08080 · #F5F5DC · #B0E0E6

Retro Fresh

Excellent for clean content areas, navigation, or elements requiring a cool, refreshing feel.

#B0E0E6 · #ADD8E6 · #F5F5DC

Charming Blend

Creates a soft, inviting look for decorative elements, sub-sections, or subtle branding.

#D8BFD8 · #F08080 · #F5F5DC

CSS variables

:root {
  --midcentury-mint-kiss-1: #F08080;
  --midcentury-mint-kiss-2: #B0E0E6;
  --midcentury-mint-kiss-3: #F5F5DC;
  --midcentury-mint-kiss-4: #ADD8E6;
  --midcentury-mint-kiss-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midcentury-mint-kiss": {
        1: "#F08080",
        2: "#B0E0E6",
        3: "#F5F5DC",
        4: "#ADD8E6",
        5: "#D8BFD8",
      }
    }
  }
}

Related searches

midcentury pastel pink mintvintage sweet color paletteretro blush mint schemecharming pastel designsoft retro branding colors

Palette colors

Hex values

Color 1#F08080
·
Color 2#B0E0E6
·
Color 3#F5F5DC
·
Color 4#ADD8E6
·
Color 5#D8BFD8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.3:1Fail
1.7:1Fail
1.5:1Fail
2
1.8:1Fail
1.3:1Fail
1.1:1Fail
1.2:1Fail
3
2.3:1Fail
1.3:1Fail
1.4:1Fail
1.5:1Fail
4
1.7:1Fail
1.1:1Fail
1.4:1Fail
1.1:1Fail
5
1.5:1Fail
1.2:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Midcentury Mint Kiss

View all pastel