Back to palettes

Palette

Lollipop Swirl Sugar

A collection of cheerful, vibrant pastels reminiscent of a whimsical candy store.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lollipop Swirl Sugar 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 Lollipop Swirl Sugar.

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

Data visualization

#FF69B4#87CEEB#FFFACD#98FB98#BA55D3

Palette guide

How to use Lollipop Swirl Sugar

Overview

The 'Lollipop Swirl Sugar' palette is a collection of cheerful, vibrant colors reminiscent of a whimsical candy store. Featuring a bold hot pink #FF69B4, a bright sky blue #87CEEB, a soft cream #FFFACD, a lively light green #98FB98, and a striking medium purple #BA55D3, this palette is perfect for creating energetic, playful, and highly engaging designs. Designers can leverage these dynamic shades to infuse projects with a fun and unforgettable aesthetic, while developers will find them ideal for building eye-catching interfaces that captivate users across web and mobile platforms with their delightful vibrancy.

Best used for

  • Children's entertainment websites
  • Theme park or amusement branding
  • Interactive educational content
  • Festive event marketing
  • Creative social media campaigns
  • Fun and quirky mobile app interfaces

Suggested color roles

primary

#FF69B4 - A bold, energetic hot pink, excellent for primary calls-to-action, headers, or backgrounds where maximum impact is desired.

secondary

#87CEEB - A bright sky blue, perfect for secondary calls-to-action, highlights, or graphical elements that need a cool, refreshing pop.

accent

#BA55D3 - A striking medium purple, highly effective for important icons, key interactive elements, or to provide a sophisticated, vibrant contrast.

background

#FFFACD - A soft cream, serving as a versatile, light backdrop for content, offering a gentle contrast to the vibrant colors.

text

#98FB98 - A lively light green, suitable for large decorative headings. For body text, use a dark grey or black for optimal readability, as these vibrant colors have low contrast with light backgrounds.

Accessibility notes

  • Vibrant colors like #FF69B4, #87CEEB, #98FB98, #BA55D3 will often require dark text (black or charcoal) to meet WCAG contrast ratios.
  • #FFFACD is the best background for text, but even then, a very dark text color is necessary for readability.
  • Avoid using any of the vibrant colors as text on each other or on #FFFACD for essential information due to low contrast.
  • Ensure interactive elements are clearly distinguishable through sufficient contrast or distinct visual cues.

Recommended combinations

Vibrant Pop

Creates an energetic and cheerful combination for headers, illustrations, and key UI elements.

#FF69B4 · #87CEEB · #98FB98

Sweet & Bold

Ideal for dynamic backgrounds, callouts, and eye-catching graphic elements with a strong anchor.

#FFFACD · #BA55D3 · #FF69B4

Playful Contrast

Provides a balanced yet lively mix for sections, interactive buttons, and playful content blocks.

#87CEEB · #98FB98 · #BA55D3

CSS variables

:root {
  --lollipop-swirl-sugar-1: #FF69B4;
  --lollipop-swirl-sugar-2: #87CEEB;
  --lollipop-swirl-sugar-3: #FFFACD;
  --lollipop-swirl-sugar-4: #98FB98;
  --lollipop-swirl-sugar-5: #BA55D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lollipop-swirl-sugar": {
        1: "#FF69B4",
        2: "#87CEEB",
        3: "#FFFACD",
        4: "#98FB98",
        5: "#BA55D3",
      }
    }
  }
}

Related searches

vibrant candy color paletteplayful bright ui designsweet fun web colorslollipop inspired graphicscolorful whimsical branding

Palette colors

Hex values

Color 1#FF69B4
·
Color 2#87CEEB
·
Color 3#FFFACD
·
Color 4#98FB98
·
Color 5#BA55D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
2.1:1Fail
1.5:1Fail
2
1.5:1Fail
1.6:1Fail
1.4:1Fail
2.3:1Fail
3
2.5:1Fail
1.6:1Fail
1.2:1Fail
3.7:1AA18
4
2.1:1Fail
1.4:1Fail
1.2:1Fail
3.1:1AA18
5
1.5:1Fail
2.3:1Fail
3.7:1AA18
3.1:1AA18

Similar palettes

More like Lollipop Swirl Sugar

View all vibrant
Gummy Bear Blast
Playful Candy Explosion
Bubblegum Pop
Bubblegum Pop Burst
Candy Block Fun
Candy Carnival Swirl