Back to palettes

Palette

Sweet Macaron Tower

A collection of light, delicate pastels, reflecting the delightful colors of a French macaron assortment.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FDE8E9#FFF3BF#E7F6DF#E6F3F3#F2DFE6

Palette guide

How to use Sweet Macaron Tower

Overview

The "Sweet Macaron Tower" palette (version 3) presents a collection of remarkably light, delicate pastels, reflecting the delightful colors of a French macaron assortment. This serene palette includes a very soft pink (#FDE8E9), a creamy pastel yellow (#FFF3BF), a gentle mint green (#E7F6DF), a whisper of sky blue (#E6F3F3), and a subtle lilac-pink (#F2DFE6). It's ideal for designers and developers aiming to create airy, sophisticated, and comforting visuals. These hues blend seamlessly, offering a harmonious foundation for branding, user interfaces, or any design project that benefits from a light, understated, and elegant aesthetic.

Best used for

  • High-end bakery branding
  • Elegant wedding stationery
  • Spa and wellness website design
  • Baby fashion and nursery decor
  • Minimalist UI themes
  • Soft art and illustration

Suggested color roles

primary

A very soft pink (#FDE8E9), perfect for large background areas, gentle branding, or sections that need to feel inviting and subtle.

secondary

A gentle mint green (#E7F6DF), excellent for balancing the warmer tones, providing a fresh and clean secondary element in layouts or accents.

accent

A creamy pastel yellow (#FFF3BF), ideal for subtle highlights, delicate icons, or small interactive elements that need a touch of warmth without being intrusive.

background

A whisper of sky blue (#E6F3F3), serving as an exceptionally light and clean base, ensuring an airy feel and allowing other elements to float gracefully.

text

For clear readability, use a dark gray like #333333 or a deep charcoal for body text, as the palette's colors are extremely light.

Accessibility notes

  • Due to the extreme lightness of this palette, ensure very dark text (e.g., black or charcoal) is used for all body copy to meet WCAG contrast standards.
  • Avoid using any of the palette's colors for text; they lack sufficient contrast against each other and against white backgrounds.
  • When designing interactive elements, ensure their boundaries or hover states are clearly distinguishable, perhaps using a darker outline.
  • Use larger font sizes or bolding for critical information if a slightly lighter text color (still dark) is desired, but prioritize contrast.

Recommended combinations

Airy Foundation

Ideal for creating serene and open website layouts, clean background washes, or minimalist branding where lightness is key.

#FDE8E9 · #E6F3F3 · #FFF3BF

Soft Contrast

Excellent for subtle visual separation in UI elements, delicate infographic backgrounds, or inviting product displays.

#E7F6DF · #F2DFE6 · #FFF3BF

Whisper Tones

Best for designs requiring an almost monochromatic feel with gentle shifts in hue, such as sophisticated editorial layouts or elegant digital art.

#FDE8E9 · #E6F3F3 · #E7F6DF

CSS variables

:root {
  --sweet-macaron-tower-3-1: #FDE8E9;
  --sweet-macaron-tower-3-2: #FFF3BF;
  --sweet-macaron-tower-3-3: #E7F6DF;
  --sweet-macaron-tower-3-4: #E6F3F3;
  --sweet-macaron-tower-3-5: #F2DFE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-macaron-tower-3": {
        1: "#FDE8E9",
        2: "#FFF3BF",
        3: "#E7F6DF",
        4: "#E6F3F3",
        5: "#F2DFE6",
      }
    }
  }
}

Related searches

ultra light pastel palettedelicate macaron colorsairy soft design schemeelegant subtle pastelsminimalist light hues

Palette colors

Hex values

Color 1#FDE8E9
·
Color 2#FFF3BF
·
Color 3#E7F6DF
·
Color 4#E6F3F3
·
Color 5#F2DFE6
·

Accessibility

Contrast checker

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

Similar palettes

More like Sweet Macaron Tower

View all pastel
Pastel Confection Swirl
Macaron Patisserie
Macaron Sweet Delight
Pastel Macaron
Pastel Macaron Delight
Pastel Macaron Dreams