Palette

Macaron Tower Pastel

A delightful array of soft, muted colors, like a stack of delicate French macarons.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Macaron Tower Pastel 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 Macaron Tower Pastel.

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

Data visualization

#F9EBEA#E4D8ED#D3E7EF#EBF5D5#FFF9DD

Palette guide

How to use Macaron Tower Pastel

Overview

The 'Macaron Tower Pastel' palette offers a delightful array of soft, muted colors, like a stack of delicate French macarons. It includes a warm beige-pink (#F9EBEA), a gentle lavender (#E4D8ED), a serene light blue (#D3E7EF), a fresh minty green (#EBF5D5), and a creamy pale yellow (#FFF9DD). This collection is perfect for designers and developers aiming to create cheerful, inviting, and sophisticated digital experiences or branding. The harmonious blend of these muted pastels ensures a feeling of gentle joy and elegance, ideal for projects seeking an approachable yet refined aesthetic.

Best used for

Bakery and cafe branding and websites
Children's educational apps and websites
Craft and DIY project blogs
Spring and summer fashion promotions
Personalized gift shop e-commerce
Event planning for whimsical parties

Suggested color roles

primary

Use #F9EBEA as a warm and inviting primary color for main sections or brand identity, offering a soft focal point.

secondary

Apply #D3E7EF for complementary backgrounds or larger elements, providing a refreshing and balanced secondary tone.

accent

Introduce #EBF5D5 sparingly for subtle highlights, calls-to-action, or decorative details, adding a fresh touch.

background

Utilize #FFF9DD as a clean, creamy background, ensuring a soft and inviting base for all content.

text

For optimal readability, always use a dark text color, such as a deep charcoal like #333333, against these light pastels.

Accessibility notes

Ensure all text has strong contrast; use dark colors like #333333 for text on any of these light backgrounds.
Avoid using two light pastels from the palette for critical information or small UI elements without sufficient contrast.
Verify that interactive elements like buttons or links have clear focus states with distinct contrast.
When designing forms, ensure input fields and labels have sufficient contrast from the background and placeholder text.

Recommended combinations

Muted Harmony

Creates a balanced and calm base for backgrounds or multi-section layouts, promoting gentle transitions.

#FFF9DD · #D3E7EF · #EBF5D5

Cheerful Accents

Ideal for decorative elements, subtle buttons, or to highlight secondary information playfully and elegantly.

#F9EBEA · #E4D8ED · #EBF5D5

Soft Contrast

A versatile combination suitable for headers, footers, or distinct content blocks requiring a soft separation.

#D3E7EF · #F9EBEA · #FFF9DD

CSS variables

:root {
  --macaron-tower-pastel-1: #F9EBEA;
  --macaron-tower-pastel-2: #E4D8ED;
  --macaron-tower-pastel-3: #D3E7EF;
  --macaron-tower-pastel-4: #EBF5D5;
  --macaron-tower-pastel-5: #FFF9DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "macaron-tower-pastel": {
        1: "#F9EBEA",
        2: "#E4D8ED",
        3: "#D3E7EF",
        4: "#EBF5D5",
        5: "#FFF9DD",
      }
    }
  }
}

Hex values

Color 1#F9EBEA

Color 2#E4D8ED

Color 3#D3E7EF

Color 4#EBF5D5

Color 5#FFF9DD

Accessibility

Contrast checker

1.2:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Macaron Tower Pastel

Macaron Tower Pastel

See it in context.

Ready when you are.

Built with Macaron Tower Pastel.

How to use Macaron Tower Pastel

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Muted Harmony

Cheerful Accents

Soft Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Macaron Tower Pastel