Palette

Pastel Sugar Dust

A delicate and ethereal blend of soft, sugary hues, like floating confectionary in a dreamscape.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Sugar Dust 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 Sugar Dust.

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

Data visualization

#f8dcf0#dbe7fb#fefbd8#d9fbfb#e4d9f8

Palette guide

How to use Pastel Sugar Dust

Overview

The "Pastel Sugar Dust" palette is a delicate and ethereal blend of soft, sugary hues, like floating confectionary in a dreamscape. This playful collection features #f8dcf0, a sweet light pink, #dbe7fb, a gentle sky blue, and #fefbd8, a warm, creamy yellow. #d9fbfb introduces a crisp light cyan, while #e4d9f8 rounds out the palette with a soft, dreamy lavender. Designers can leverage this palette to create lighthearted, whimsical, and inviting designs, ideal for children's products, sweet treats branding, or any project requiring a touch of innocent charm and softness.

Best used for

Candy shop or bakery branding
Children's book illustrations
Baby shower invitations and decorations
Playful mobile app interfaces
Craft supplies and DIY project websites
Social media content for sweet or whimsical brands

Suggested color roles

primary

#dbe7fb - A gentle sky blue, perfect for main content areas, headers, or large background sections to establish a light and airy feel.

secondary

#f8dcf0 - This sweet light pink is ideal for subheadings, decorative elements, or secondary calls-to-action, adding warmth and playfulness.

accent

#e4d9f8 - Apply this soft lavender for subtle highlights, interactive states, or small details, providing a touch of dreamy sophistication.

background

#fefbd8 - A very light, creamy yellow that offers a soft, inviting canvas, making the overall design feel warm and approachable.

text

#d9fbfb - Best for extremely subtle, decorative elements; for body text, use a dark neutral like #333333 for optimal readability.

Accessibility notes

All colors are very light; ensure high contrast with dark text (e.g., black or #2A2A2A) for all written content.
#fefbd8 and #d9fbfb are particularly light and should not be used for text or small interactive elements.
Avoid placing light text on any of these pastel backgrounds; always test contrast ratios carefully.
For interactive elements, ensure sufficient visual cues beyond color, as some combinations might have low contrast.

Recommended combinations

Confection Swirl

Creates a soft, sugary blend for background gradients, product packaging, or decorative UI elements.

#F8DCF0 · #DBE7FB · #FEFBD8

Dreamy Play

Combine these for a playful yet harmonious look, with the blue as a base and pink/purple for cheerful accents.

#DBE7FB · #E4D9F8 · #F8DCF0

Airy Focus

Use the light yellow as a background, the cyan for specific sections, and the sky blue for key information.

#FEFBD8 · #D9FBFB · #DBE7FB

CSS variables

:root {
  --pastel-sugar-dust-1: #f8dcf0;
  --pastel-sugar-dust-2: #dbe7fb;
  --pastel-sugar-dust-3: #fefbd8;
  --pastel-sugar-dust-4: #d9fbfb;
  --pastel-sugar-dust-5: #e4d9f8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-sugar-dust": {
        1: "#f8dcf0",
        2: "#dbe7fb",
        3: "#fefbd8",
        4: "#d9fbfb",
        5: "#e4d9f8",
      }
    }
  }
}

Hex values

Color 1#f8dcf0

Color 2#dbe7fb

Color 3#fefbd8

Color 4#d9fbfb

Color 5#e4d9f8

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

Similar palettes

More like Pastel Sugar Dust

Pastel Sugar Dust

See it in context.

Ready when you are.

Built with Pastel Sugar Dust.

How to use Pastel Sugar Dust

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Confection Swirl

Dreamy Play

Airy Focus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Sugar Dust