Back to palettes

Palette

Fairy Floss Swirl

Dreamy and light, like fluffy fairy floss swirling into clouds on a whimsical summer day.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fairy Floss 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 Fairy Floss Swirl.

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

Data visualization

#FFB3BA#FFDFBA#FFFFBA#BAFFC9#BAE1FF

Palette guide

How to use Fairy Floss Swirl

Overview

The Fairy Floss Swirl palette offers a delightful collection of soft, desaturated pastels perfect for evoking a whimsical and sweet mood. Featuring gentle hues like the rosy #FFB3BA, the warm #FFDFBA, the sunny #FFFFBA, the fresh #BAFFC9, and the serene #BAE1FF, this scheme is ideal for designs requiring a light, airy, and playful touch. Designers will find these colors exceptionally versatile for creating inviting user interfaces, charming brand identities, and soothing digital experiences. Its harmonious blend ensures a cohesive and dreamy aesthetic, making it a go-to for projects that aim to feel gentle and approachable without being overly vibrant.

Best used for

  • Children's product branding and packaging
  • Wedding invitations and event stationery
  • Beauty and skincare product design
  • Lifestyle blogs and social media graphics
  • Casual mobile game interfaces and app design
  • Spring/Summer fashion collections

Suggested color roles

primary

#BAE1FF – A calming light blue, excellent for main headers, navigation bars, or primary brand accents to convey serenity and openness.

secondary

#FFB3BA – A soft pink that pairs beautifully with the primary blue, suitable for supporting sections, call-to-action buttons, or feminine touches.

accent

#FFFFBA – This pale yellow provides a gentle highlight, perfect for small interactive elements, icons, or to add a touch of warmth and cheer.

background

#BAFFC9 – A very light mint green, offering a subtle, fresh backdrop that is easy on the eyes and provides a gentle base for content.

text

For optimal readability, use a dark charcoal or near-black text color (e.g., #333333) against any of these light pastel backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, as most pastels have low contrast against white or other light pastels. Always use a contrast checker.
  • Avoid placing light text directly on light pastel backgrounds; opt for dark text colors for body copy and headings.
  • For interactive elements like buttons, ensure their hover/active states provide a clear visual change with adequate contrast.
  • Consider using outlines or borders with darker tones to distinguish UI elements if relying solely on pastel fills.

Recommended combinations

Sweet Harmony

Ideal for feminine brands, confectionery packaging, or romantic-themed designs where warmth and softness are key.

#FFB3BA · #FFDFBA · #FFFFBA

Fresh Breeze

Excellent for nature-inspired themes, health & wellness content, or clean, airy user interfaces that promote calm.

#BAE1FF · #BAFFC9 · #FFFFBA

Playful Pop

Great for children's illustrations, playful app designs, or any project needing a bright yet gentle, energetic feel.

#FFB3BA · #BAE1FF · #BAFFC9

CSS variables

:root {
  --fairy-floss-swirl-1: #FFB3BA;
  --fairy-floss-swirl-2: #FFDFBA;
  --fairy-floss-swirl-3: #FFFFBA;
  --fairy-floss-swirl-4: #BAFFC9;
  --fairy-floss-swirl-5: #BAE1FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-floss-swirl": {
        1: "#FFB3BA",
        2: "#FFDFBA",
        3: "#FFFFBA",
        4: "#BAFFC9",
        5: "#BAE1FF",
      }
    }
  }
}

Related searches

pastel color schemessweet brand colorsdreamy UI palettelight aesthetic designplayful web colors

Palette colors

Hex values

Color 1#FFB3BA
·
Color 2#FFDFBA
·
Color 3#FFFFBA
·
Color 4#BAFFC9
·
Color 5#BAE1FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.5:1Fail
1.2:1Fail
2
1.3:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
3
1.6:1Fail
1.2:1Fail
1.1:1Fail
1.3:1Fail
4
1.5:1Fail
1.1:1Fail
1.1:1Fail
1.2:1Fail
5
1.2:1Fail
1.1:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Fairy Floss Swirl

View all pastel
Candy Cloud Fluff
Candy Floss Cloud
Candy Shop Whimsy
Cotton Candy Hues
Cotton Candy Skies
Dreamy Cloud Swirl