Back to palettes

Palette

Macaron Sweet Treat

Delicate and delightful, like a display of perfectly crafted, brightly colored 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 Treat 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 Treat.

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

Data visualization

#FEEBFD#E0FFFF#F0FFF0#FAFAD2#FFE4E1

Palette guide

How to use Macaron Sweet Treat

Overview

The 'Macaron Sweet Treat' palette offers delicate and delightful hues, reminiscent of a display of perfectly crafted, brightly colored French macarons. This collection includes a soft lilac-pink (#FEEBFD), a serene light cyan (#E0FFFF), a calming minty off-white (#F0FFF0), a creamy pale yellow (#FAFAD2), and a gentle rose-pink (#FFE4E1). Ideal for designers and developers seeking to evoke a playful yet sophisticated mood, these pastels are excellent for creating inviting and airy digital experiences or branding. Their light and harmonious nature ensures a fresh and clean aesthetic.

Best used for

  • Online confectionery or bakery shops
  • Children's party invitations and themes
  • Soft fashion or beauty product packaging
  • Digital art and illustration backgrounds
  • Personal blogs with a gentle aesthetic
  • Baby product website design

Suggested color roles

primary

Use #FEEBFD as a charming primary color for headers or significant sections, offering a sweet and inviting feel.

secondary

Apply #E0FFFF for secondary elements or complementary backgrounds, providing a refreshing and clean contrast.

accent

Introduce #FAFAD2 sparingly for subtle highlights, calls-to-action, or decorative details, adding gentle warmth.

background

Utilize #F0FFF0 as a clean, expansive background, ensuring excellent readability for darker text.

text

For optimal legibility, use a dark charcoal or black text color (e.g., #333333) against these light pastel shades.

Accessibility notes

  • Ensure high contrast for all text; a dark color like #333333 is essential on these light backgrounds for readability.
  • Avoid placing two light pastel colors from this palette directly adjacent for critical information.
  • Verify that interactive elements have clear visual cues and sufficient contrast with their surrounding colors.
  • When designing forms, ensure input fields and labels have distinct contrast from the background and placeholder text.

Recommended combinations

Airy Base

Creates a light, open feel for backgrounds or expansive content areas, promoting a sense of calm.

#F0FFF0 · #E0FFFF · #FAFAD2

Sweet Accents

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

#FEEBFD · #FFE4E1 · #FAFAD2

Fresh Contrast

A crisp combination suitable for headers, footers, or distinct content blocks requiring a clean separation.

#E0FFFF · #FEEBFD · #F0FFF0

CSS variables

:root {
  --macaron-sweet-treat-1: #FEEBFD;
  --macaron-sweet-treat-2: #E0FFFF;
  --macaron-sweet-treat-3: #F0FFF0;
  --macaron-sweet-treat-4: #FAFAD2;
  --macaron-sweet-treat-5: #FFE4E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "macaron-sweet-treat": {
        1: "#FEEBFD",
        2: "#E0FFFF",
        3: "#F0FFF0",
        4: "#FAFAD2",
        5: "#FFE4E1",
      }
    }
  }
}

Related searches

macaron color inspirationsweet pastel web designlight dessert paletteplayful soft colorsdelicate branding pastels

Palette colors

Hex values

Color 1#FEEBFD
·
Color 2#E0FFFF
·
Color 3#F0FFF0
·
Color 4#FAFAD2
·
Color 5#FFE4E1
·

Accessibility

Contrast checker

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

Similar palettes

More like Macaron Sweet Treat

View all pastel