Palette

Retro Candy Swirl

A whimsical mix of sugary sweet pastel and vibrant colors, reminiscent of nostalgic candies and desserts.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Candy 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 Retro Candy Swirl.

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

Data visualization

#FFD9EB#FF99D7#C662E7#624B9F#0F2D5D

Palette guide

How to use Retro Candy Swirl

Overview

The "Retro Candy Swirl" palette offers a delightful journey into a world of sugary sweet pastels and deeper, complementary tones, reminiscent of nostalgic candies and desserts. Featuring a soft light pink (#FFD9EB), a vibrant medium pink (#FF99D7), a lively orchid (#C662E7), a rich dark purple (#624B9F), and a deep navy blue (#0F2D5D), this collection is perfect for designers seeking a playful yet sophisticated aesthetic. Developers can utilize these graduated hues to establish clear visual hierarchies, create appealing layered designs, and build interfaces that feel both inviting and calming. It's an excellent choice for branding, digital products, or promotional materials that aim for a gentle, whimsical charm.

Best used for

Baby product branding
Feminine lifestyle blogs
Wedding invitations or decor
Dessert or bakery websites
Soft, dreamy digital illustrations
Cosmetics packaging

Suggested color roles

primary

A deep, calming primary for headlines, navigation, or grounding elements in a pastel design using #624B9F.

secondary

A sweet and vibrant secondary, excellent for subheadings, interactive elements, or accentuating features using #FF99D7.

accent

A lively and playful accent for hover states, small graphic details, or to add a pop of energy using #C662E7.

background

A soft, airy background color that provides a gentle base using #FFD9EB, perfect for extensive content or light-themed interfaces.

text

Use #0F2D5D or a dark charcoal for body text on light backgrounds like #FFD9EB. White text will work well on #624B9F and #0F2D5D.

Accessibility notes

Ensure sufficient contrast when using #FF99D7 or #C662E7 for text, especially against lighter backgrounds.
#FFD9EB offers very low contrast with white text; always use dark text like #0F2D5D or black for readability.
Avoid using light pastel combinations for critical information, such as #FFD9EB text on #FF99D7 background.
Test all text and interactive element contrasts against WCAG 2.1 AA standards, particularly with the lighter shades.

Recommended combinations

Soft UI Card

Light pink for the card background, dark purple for text/icons, and medium pink for a subtle button.

#FFD9EB · #624B9F · #FF99D7

Gradient Overlay

Create a smooth, deep gradient for hero sections or background elements, transitioning from orchid to navy.

#C662E7 · #624B9F · #0F2D5D

Whimsical Header

Medium pink for a playful title, navy for subtext, and light pink for a delicate underline or decorative element.

#FF99D7 · #0F2D5D · #FFD9EB

CSS variables

:root {
  --retro-candy-swirl-1: #FFD9EB;
  --retro-candy-swirl-2: #FF99D7;
  --retro-candy-swirl-3: #C662E7;
  --retro-candy-swirl-4: #624B9F;
  --retro-candy-swirl-5: #0F2D5D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-candy-swirl": {
        1: "#FFD9EB",
        2: "#FF99D7",
        3: "#C662E7",
        4: "#624B9F",
        5: "#0F2D5D",
      }
    }
  }
}

Hex values

Color 1#FFD9EB

Color 2#FF99D7

Color 3#C662E7

Color 4#624B9F

Color 5#0F2D5D

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

5.4:1AA

10.5:1AAA

1.5:1Fail

1.7:1Fail

3.6:1AA18

6.9:1AA

2.6:1Fail

1.7:1Fail

2.1:1Fail

4.1:1AA18

5.4:1AA

3.6:1AA18

2.1:1Fail

1.9:1Fail

10.5:1AAA

6.9:1AA

4.1:1AA18

1.9:1Fail

Similar palettes

More like Retro Candy Swirl