Back to palettes

Palette

Patisserie Sugar Dream

A delightful collection of soft, sweet pastel colors reminiscent of elegant, whimsical French macarons and treats.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Patisserie Sugar Dream 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 Patisserie Sugar Dream.

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

Data visualization

#F8C3CD#BEEBE9#D7BDE2#FCE7A6#FFF9E0

Palette guide

How to use Patisserie Sugar Dream

Overview

The Patisserie Sugar Dream palette is a whimsical collection of soft, sweet pastels, perfect for designs that aim for a playful, ethereal, and inviting aesthetic. Featuring the delicate pink of #F8C3CD, the serene aqua of #BEEBE9, and the gentle lavender of #D7BDE2, this palette creates a dreamlike harmony. Developers can leverage these hues to craft user interfaces for creative brands, children's content, or delightful e-commerce experiences. The sunny yellow of #FCE7A6 adds a touch of cheerful warmth, while #FFF9E0 provides an almost-white, creamy base, ensuring a versatile range for conveying charm and lightness in digital spaces.

Best used for

  • Children's party supplies
  • Sweet treat packaging design
  • Creative arts and craft websites
  • Indie game aesthetic
  • Baby shower invitations
  • Whimsical e-commerce sites

Suggested color roles

primary

A soft, inviting pink, excellent for main content areas, headers, or gentle branding: #F8C3CD.

secondary

A calming aqua, suitable for secondary sections, navigation, or subtle backgrounds: #BEEBE9.

accent

A delicate lavender that provides a sophisticated touch, ideal for highlights or decorative elements: #D7BDE2.

background

A very light, creamy yellow that offers a soft, warm, and clean canvas: #FFF9E0.

text

A strong dark grey (e.g., #444444) ensures excellent readability against these light pastel shades.

Accessibility notes

  • Ensure all text, especially smaller fonts, uses a very dark color (e.g., black or #444444) for sufficient contrast.
  • Avoid using any of the palette colors for text against other palette colors, as contrast will be too low.
  • Interactive elements should have clear visual indicators for states (hover, active) beyond just color.
  • The background color #FFF9E0 is very light, making it a good base for dark text.

Recommended combinations

Dreamy Core

A soft and harmonious blend for main UI elements, backgrounds, and a gentle feel.

#F8C3CD · #BEEBE9 · #FFF9E0

Playful Pop

Use for delightful accents, illustrations, or sections needing a touch of cheerful contrast.

#D7BDE2 · #FCE7A6 · #F8C3CD

Fresh & Light

Ideal for refreshing headers, infographics, or content blocks that need a bright, airy feel.

#BEEBE9 · #FCE7A6 · #FFF9E0

CSS variables

:root {
  --patisserie-sugar-dream-1: #F8C3CD;
  --patisserie-sugar-dream-2: #BEEBE9;
  --patisserie-sugar-dream-3: #D7BDE2;
  --patisserie-sugar-dream-4: #FCE7A6;
  --patisserie-sugar-dream-5: #FFF9E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "patisserie-sugar-dream": {
        1: "#F8C3CD",
        2: "#BEEBE9",
        3: "#D7BDE2",
        4: "#FCE7A6",
        5: "#FFF9E0",
      }
    }
  }
}

Related searches

whimsical pastel color schemesweet dream aestheticsoft pink and blue paletteplayful UI colorslight yellow and lavender design

Palette colors

Hex values

Color 1#F8C3CD
·
Color 2#BEEBE9
·
Color 3#D7BDE2
·
Color 4#FCE7A6
·
Color 5#FFF9E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.1:1Fail
1.3:1Fail
1.5:1Fail
2
1.2:1Fail
1.3:1Fail
1.1:1Fail
1.2:1Fail
3
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.6:1Fail
4
1.3:1Fail
1.1:1Fail
1.4:1Fail
1.2:1Fail
5
1.5:1Fail
1.2:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Patisserie Sugar Dream

View all pastel
Candyfloss Cloud Dream
Fairy Tale Petals
Sugar Plum Pixie
Candy Floss Cloud
Gumball Machine Gleam
Sugar Cloud Dream