Palette

Circus Candy Swirl

A vibrant, playful burst of pinks and purples, like sugary treats at a funfair.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7E4EA#FFC0CB#FF69B4#BA55D3#4B0082

Palette guide

How to use Circus Candy Swirl

Overview

The Circus Candy Swirl palette is a vibrant, playful burst of pinks and purples, reminiscent of sugary treats at a funfair. With shades ranging from the soft #F7E4EA to the deep, mystical #4B0082, designers can create enchanting and whimsical designs. This palette includes cheerful #FFC0CB, lively #FF69B4, and regal #BA55D3, offering a harmonious blend for projects aiming for a sweet, bold, or magical aesthetic. Developers will find these hex codes easy to implement across playful UI, captivating branding, or whimsical digital art, ensuring a consistent and delightful user experience. The palette's dynamic range allows for engaging contrasts and sophisticated layering, making it ideal for children's brands, confectionery, or fantasy themes.

Best used for

children's toy packaging and branding
candy store marketing materials
fantasy-themed digital illustrations
playful mobile app UI
sweet treat bakery branding
cosmetics and beauty products

Suggested color roles

primary

The lively #FF69B4 (hot pink) serves as a bold primary, drawing immediate attention and setting a playful, energetic tone for key elements.

secondary

The enchanting #BA55D3 (medium orchid) provides a sophisticated secondary option, ideal for subheadings, interactive elements, or backgrounds that need depth.

accent

The deepest tone, #4B0082 (indigo), can be used sparingly for impactful accents, adding mystery and grounding to important details or calls-to-action.

background

The soft #F7E4EA (light pink) creates a light, airy background, promoting readability and a whimsical user experience. For a slightly warmer background, consider #FFC0CB.

text

For lighter backgrounds like #F7E4EA, use #4B0082 or a deep charcoal for body text. For darker backgrounds, white or a very light pink provides excellent contrast.

Accessibility notes

Ensure sufficient contrast when pairing #FFC0CB with #F7E4EA for text; they may be too close in luminosity.
The darkest color, #4B0082, offers strong contrast for light text (e.g., white or #F7E4EA).
Avoid using #BA55D3 for small text against #FF69B4 backgrounds without careful WCAG contrast checking.
For optimal readability, use a dark purple or black for body text on the lighter palette shades.

Recommended combinations

Sweet Whimsy

Create soft, layered backgrounds or a gentle primary color scheme for playful designs.

#F7E4EA · #FFC0CB · #FF69B4

Bold Magic

Use the deep purples for grounding elements and the hot pink for vibrant accents or calls-to-action.

#BA55D3 · #4B0082 · #FF69B4

Candy Gradient

Ideal for creating smooth transitions, evocative backgrounds, or layered graphic elements with a dreamy feel.

#FFC0CB · #FF69B4 · #BA55D3

CSS variables

:root {
  --circus-candy-swirl-1: #F7E4EA;
  --circus-candy-swirl-2: #FFC0CB;
  --circus-candy-swirl-3: #FF69B4;
  --circus-candy-swirl-4: #BA55D3;
  --circus-candy-swirl-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "circus-candy-swirl": {
        1: "#F7E4EA",
        2: "#FFC0CB",
        3: "#FF69B4",
        4: "#BA55D3",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#F7E4EA

Color 2#FFC0CB

Color 3#FF69B4

Color 4#BA55D3

Color 5#4B0082

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

3.2:1AA18

10.6:1AAA

1.3:1Fail

1.7:1Fail

2.6:1Fail

8.4:1AAA

2.2:1Fail

1.7:1Fail

1.5:1Fail

4.9:1AA

3.2:1AA18

2.6:1Fail

1.5:1Fail

3.3:1AA18

10.6:1AAA

8.4:1AAA

4.9:1AA

3.3:1AA18

Similar palettes

More like Circus Candy Swirl

Carnival Merry-Go-Round

Circus Tent Brights