Back to palettes

Palette

Pastel Confection Swirl

A delightful mix of soft, muted tones reflecting the delicate sweetness of French macarons.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Confection Swirl 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 Pastel Confection Swirl.

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

Data visualization

#F0B8B8#D8BFD8#B0E0E6#CDEEE6#FFFACD

Palette guide

How to use Pastel Confection Swirl

Overview

The Pastel Confection Swirl palette is a delightful mix of soft, muted tones, evoking the delicate sweetness of French macarons and airy desserts. With inviting hues like the rosy #F0B8B8, the gentle lavender #D8BFD8, and the fresh aqua #B0E0E6, this collection is perfect for creating charming and playful designs. Developers will find these light, harmonious colors excellent for engaging user interfaces, while designers can leverage their sweet aesthetic for branding that conveys warmth, creativity, and a touch of indulgence. The vibrant yet soft #FFFACD adds a sunny touch, making this palette versatile for joyful projects.

Best used for

  • Bakery and cafe branding and packaging
  • Dessert blog or recipe website design
  • Children's party invitations and decorations
  • Feminine fashion or beauty product branding
  • Sweet-themed mobile game interfaces
  • Art and craft project visual identities

Suggested color roles

primary

Use #F0B8B8 as a warm, inviting primary color for brand identity or prominent headers.

secondary

Employ #D8BFD8 for supporting elements, subheadings, or as a soft background texture.

accent

Apply #B0E0E6 for interactive components, call-to-action buttons, or to add a refreshing pop.

background

Utilize #FFFACD for main content areas, providing a bright, cheerful, and welcoming canvas.

text

A rich chocolate brown or deep charcoal text color will provide excellent contrast and maintain the palette's warmth.

Accessibility notes

  • Ensure high contrast for text; all palette colors are light and require dark text (e.g., black, dark brown, or charcoal).
  • Avoid using light text on any of these pastel backgrounds to prevent readability issues.
  • When using #FFFACD as a background, ensure sufficient contrast for any overlaid text or iconography.
  • Consider using a slightly darker version of #D8BFD8 or #B0E0E6 for larger headings to improve legibility if white text is desired, but dark text is generally safer.

Recommended combinations

Macaron Trio

Create delightful visual groupings for product showcases or decorative elements.

#F0B8B8 · #D8BFD8 · #FFFACD

Fresh Swirl

Design refreshing headers or background patterns with a cool, airy feel.

#B0E0E6 · #CDEEE6 · #D8BFD8

Sweet Contrast

Ideal for playful branding where a mix of warm and cool pastels creates visual interest.

#F0B8B8 · #B0E0E6 · #FFFACD

CSS variables

:root {
  --pastel-confection-swirl-1: #F0B8B8;
  --pastel-confection-swirl-2: #D8BFD8;
  --pastel-confection-swirl-3: #B0E0E6;
  --pastel-confection-swirl-4: #CDEEE6;
  --pastel-confection-swirl-5: #FFFACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-confection-swirl": {
        1: "#F0B8B8",
        2: "#D8BFD8",
        3: "#B0E0E6",
        4: "#CDEEE6",
        5: "#FFFACD",
      }
    }
  }
}

Related searches

pastel dessert colorssweet confectionery palettemacaron color schemeplayful pastel designlight airy food branding

Palette colors

Hex values

Color 1#F0B8B8
·
Color 2#D8BFD8
·
Color 3#B0E0E6
·
Color 4#CDEEE6
·
Color 5#FFFACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
2
1:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.2:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
1.4:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.6:1Fail
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Pastel Confection Swirl

View all pastel