Palette

Candy Shop Whimsy

Soft, sugary shades of pink, blue, green, and yellow inspired by a whimsical candy store.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Candy Shop Whimsy 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 Candy Shop Whimsy.

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

Data visualization

#F7CAD0#B3E0E1#FDE2E4#D5ECC2#F6D8AC

Palette guide

How to use Candy Shop Whimsy

Overview

The Candy Shop Whimsy palette offers soft, sugary shades inspired by a delightful candy store, perfect for evoking a gentle and playful mood. This collection features a delicate rose pink #F7CAD0, a serene light blue #B3E0E1, and a warmer blush pink #FDE2E4, alongside a soft sage green #D5ECC2 and a creamy peach #F6D8AC. Each color is carefully chosen to create a harmonious blend of pastels that feels both sweet and sophisticated. It's an excellent choice for designers seeking a light, airy, and inviting aesthetic that whispers of charm and innocent delight.

Best used for

Boutique children's clothing brands
Soft toy and nursery decor design
Gentle lifestyle and wellness blogs
Wedding stationery and event branding
Interior design for serene spaces
Sweet treat packaging with an elegant touch

Suggested color roles

primary

Use #F7CAD0 (Rose Pink) for backgrounds or large sections to establish a soft, welcoming base.

secondary

Employ #B3E0E1 (Light Blue) for navigation, subheadings, or complementary design elements, offering a calming contrast.

accent

Apply #F6D8AC (Creamy Peach) for subtle highlights, decorative details, or interactive elements to add warmth without boldness.

background

The very light #FDE2E4 (Blush White) or #D5ECC2 (Sage Green) provides an airy, clean canvas for content.

text

For optimal readability, use a dark gray or charcoal text (e.g., #4A4A4A) against these light pastel backgrounds.

Accessibility notes

All colors are very light; text should be dark (e.g., #333333 or #000000) for sufficient contrast.
Avoid using any light-colored text on these backgrounds, as it will likely be unreadable for many users.
When layering pastels, ensure there is enough tonal difference to distinguish elements clearly.
For interactive elements, consider a subtle border or shadow in addition to color change for hover states.

Recommended combinations

Soft Serenity

Ideal for creating a calming website background, gentle illustrations, or elegant branding.

#F7CAD0 · #B3E0E1 · #FDE2E4

Whimsical Warmth

Perfect for adding a touch of natural warmth to designs, such as product packaging or blog headers.

#F6D8AC · #D5ECC2 · #F7CAD0

Candy Cloud

Great for subtle gradients, background textures, or soft visual storytelling.

#B3E0E1 · #FDE2E4 · #D5ECC2

CSS variables

:root {
  --candy-shop-whimsy-2-1: #F7CAD0;
  --candy-shop-whimsy-2-2: #B3E0E1;
  --candy-shop-whimsy-2-3: #FDE2E4;
  --candy-shop-whimsy-2-4: #D5ECC2;
  --candy-shop-whimsy-2-5: #F6D8AC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "candy-shop-whimsy-2": {
        1: "#F7CAD0",
        2: "#B3E0E1",
        3: "#FDE2E4",
        4: "#D5ECC2",
        5: "#F6D8AC",
      }
    }
  }
}

Hex values

Color 1#F7CAD0

Color 2#B3E0E1

Color 3#FDE2E4

Color 4#D5ECC2

Color 5#F6D8AC

Accessibility

Contrast checker

1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

Similar palettes

More like Candy Shop Whimsy

Candy Shop Whimsy

See it in context.

Ready when you are.

Built with Candy Shop Whimsy.

How to use Candy Shop Whimsy

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Serenity

Whimsical Warmth

Candy Cloud

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Candy Shop Whimsy