Back to palettes

Palette

Macaron Sweet Delight

A delicate collection of sugary, light pastels, inspired by the colorful charm of French macarons.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Macaron Sweet Delight 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 Sweet Delight.

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

Data visualization

#FDD1D1#FFEDEE#D8EEF3#F6F3D3#E6F8F3

Palette guide

How to use Macaron Sweet Delight

Overview

The 'Macaron Sweet Delight' palette offers a delicate collection of sugary, light pastels, perfectly capturing the charm of French macarons. Featuring soft pink (#FDD1D1), creamy off-white (#FFEDEE), gentle blue (#D8EEF3), subtle yellow (#F6F3D3), and a refreshing mint-green hint (#E6F8F3), this palette is ideal for creating inviting and playful designs. Designers and developers can leverage these hues to evoke feelings of warmth, sweetness, and lightheartedness, making it excellent for projects requiring a soft, approachable aesthetic. Its airy quality ensures a clean and modern feel.

Best used for

  • Children's product branding and packaging
  • Bakery or patisserie website design
  • Baby shower invitations and decor
  • Gentle lifestyle and wellness blogs
  • Spring fashion lookbooks and campaigns
  • Event planning for whimsical themes

Suggested color roles

primary

Use #FDD1D1 as a welcoming primary hue for main sections or brand identity, conveying softness and approachability.

secondary

Apply #D8EEF3 for complementary elements like headers or secondary backgrounds, providing a calm, refreshing contrast.

accent

Introduce #F6F3D3 sparingly for subtle highlights, calls-to-action, or decorative motifs, adding a touch of gentle warmth.

background

Utilize #FFEDEE as a clean, airy background, offering an excellent base that feels spacious and light.

text

For optimal readability, pair these light pastels with a dark charcoal text color, such as #333333, ensuring strong contrast.

Accessibility notes

  • Ensure sufficient contrast for all text, using a dark color like charcoal (#333333) against any palette background.
  • Avoid using two light pastel colors from the palette directly adjacent for critical information or small text.
  • Verify UI elements like buttons or links have clear visual distinction against their backgrounds.
  • Consider larger font sizes for any lighter text elements to improve readability, even with adequate contrast.

Recommended combinations

Sweet Gradient

Ideal for soft background gradients or transition effects, creating a gentle flow.

#FDD1D1 · #FFEDEE · #D8EEF3

Playful Accents

Combine these for interactive UI elements, icons, or subtle graphic details.

#D8EEF3 · #F6F3D3 · #E6F8F3

Balanced Charm

A versatile trio for main sections, sub-headers, and highlight boxes in content layouts.

#FDD1D1 · #E6F8F3 · #F6F3D3

CSS variables

:root {
  --macaron-sweet-delight-1: #FDD1D1;
  --macaron-sweet-delight-2: #FFEDEE;
  --macaron-sweet-delight-3: #D8EEF3;
  --macaron-sweet-delight-4: #F6F3D3;
  --macaron-sweet-delight-5: #E6F8F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "macaron-sweet-delight": {
        1: "#FDD1D1",
        2: "#FFEDEE",
        3: "#D8EEF3",
        4: "#F6F3D3",
        5: "#E6F8F3",
      }
    }
  }
}

Related searches

pastel color schemessoft macaron colorsdelicate dessert palettelight playful colorspretty pastel branding

Palette colors

Hex values

Color 1#FDD1D1
·
Color 2#FFEDEE
·
Color 3#D8EEF3
·
Color 4#F6F3D3
·
Color 5#E6F8F3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.3:1Fail
2
1.2:1Fail
1.1:1Fail
1:1Fail
1:1Fail
3
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
4
1.2:1Fail
1:1Fail
1.1:1Fail
1:1Fail
5
1.3:1Fail
1:1Fail
1.1:1Fail
1:1Fail

Similar palettes

More like Macaron Sweet Delight

View all pastel