Palette

Sweet Candy Dream

A joyful and soft collection of pastel candy colors, creating a lighthearted and sweet, dreamy atmosphere.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Candy 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 Sweet Candy Dream.

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

Data visualization

#F06292#BA68C8#64B5F6#FFF176#81C784

Palette guide

How to use Sweet Candy Dream

Overview

The "Sweet Candy Dream" palette is a joyful and soft collection of pastel candy colors, creating a lighthearted and dreamy atmosphere. This vibrant yet gentle array includes the sweet #F06292, the calming #64B5F6, the cheerful #FFF176, and the fresh #81C784, along with the enchanting #BA68C8. Designers and developers can leverage this palette to craft visually engaging and playful experiences across various platforms. Its diverse hues allow for dynamic layouts, ensuring designs are both captivating and convey a sense of whimsical delight.

Best used for

Creative mobile applications
Children's educational content
Playful brand identities
Event decor and party themes
Digital illustration and art
Websites with a whimsical and inviting theme

Suggested color roles

primary

Use #F06292 for key calls to action or prominent headings, offering a sweet and inviting focal point.

secondary

Apply #64B5F6 for supporting information, navigation, or to introduce a calming, balanced element.

accent

Employ #FFF176 for bright highlights, interactive states, or to add a cheerful pop of color.

background

Utilize #FFF176 as a soft, inviting background, allowing the other pastel colors to truly shine.

text

For optimal readability, use a dark neutral like charcoal. #F06292, #BA68C8, or #64B5F6 provide good contrast for text on #FFF176.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using lighter pastels like #FFF176.
Pair darker colors like #F06292 or #BA68C8 with #FFF176 for accessible text contrast.
Be cautious when using #98FB98 for small text on #FFF176, as contrast may be insufficient.
Consider larger font sizes or bolding for text elements using mid-tone colors like #81C784 to improve readability.

Recommended combinations

Bright & Cheerful

Excellent for creating energetic headers and visually stimulating sections.

#F06292 · #FFF176 · #64B5F6

Cool Harmony

Ideal for backgrounds or illustrations that require a smooth, calming, and cohesive blend.

#BA68C8 · #64B5F6 · #81C784

Playful Contrast

Creates a dynamic and inviting aesthetic, great for interactive elements or infographics.

#81C784 · #F06292 · #FFF176

CSS variables

:root {
  --sweet-candy-dream-2-1: #F06292;
  --sweet-candy-dream-2-2: #BA68C8;
  --sweet-candy-dream-2-3: #64B5F6;
  --sweet-candy-dream-2-4: #FFF176;
  --sweet-candy-dream-2-5: #81C784;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-candy-dream-2": {
        1: "#F06292",
        2: "#BA68C8",
        3: "#64B5F6",
        4: "#FFF176",
        5: "#81C784",
      }
    }
  }
}

Hex values

Color 1#F06292

Color 2#BA68C8

Color 3#64B5F6

Color 4#FFF176

Color 5#81C784

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

2.6:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

3.1:1AA18

1.8:1Fail

1.4:1Fail

1.6:1Fail

1.9:1Fail

1.1:1Fail