Palette

Gelato Dream Swirl

A delightful and creamy palette, reminiscent of swirling scoops of delicious, pastel-hued gelato, purely playful.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gelato Dream 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 Gelato Dream Swirl.

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

Data visualization

#FFFACD#FFB6C1#98FB98#B0E0E6#F5F5DC

Palette guide

How to use Gelato Dream Swirl

Overview

The Gelato Dream Swirl palette is a creamy, delightful collection of soft pastels, perfectly capturing the essence of swirling scoops of delicious gelato. With a warm base of #FFFACD (light yellow) and #F5F5DC (beige), complemented by the gentle #FFB6C1 (light pink), refreshing #98FB98 (light green), and serene #B0E0E6 (light blue), this palette radiates a purely playful and sweet mood. Designers and developers can leverage these light, airy hues to create inviting, friendly, and comforting digital experiences. It is ideal for projects that aim to evoke joy, innocence, and a touch of nostalgic charm, perfect for children's brands or casual lifestyle sites.

Best used for

Children's clothing and toy brands
Ice cream parlors and dessert shops
Playful mobile game interfaces
Baby product websites
Summer-themed event promotions
Personal blogs with a soft aesthetic

Suggested color roles

primary

Use #FFFACD as a warm, inviting primary background, providing a soft and approachable canvas for other colors.

secondary

Apply #B0E0E6 for secondary content areas or large text blocks, offering a cool, calming contrast.

accent

Reserve #FFB6C1 or #98FB98 for playful highlights, interactive elements, or call-to-action buttons to add a touch of sweetness.

background

A light and creamy #FFFACD or #F5F5DC provides an excellent soft base, allowing other pastels to subtly stand out.

text

For optimal readability on these light pastels, always use a dark charcoal or black. Avoid light-colored text on these gentle backgrounds.

Accessibility notes

Due to the light nature of all colors, ensure robust contrast for all text, especially on interactive elements.
Always use dark text (e.g., black or dark gray) on these pastel backgrounds to meet WCAG AA contrast standards.
Avoid pairing similar light tones (e.g., #F5F5DC text on #FFFACD background) as readability will be poor.
For visual distinction, consider using borders or shadows around elements in addition to color.

Recommended combinations

Creamy Delight

Ideal for a cheerful website header: #FFFACD as background, #FFB6C1 for main titles, and #B0E0E6 for subheadings.

#FFFACD · #FFB6C1 · #B0E0E6

Fresh Swirl

Perfect for content cards: #98FB98 as card background, #F5F5DC for text, and #FFB6C1 for decorative elements or links.

#98FB98 · #F5F5DC · #FFB6C1

Dreamy Blend

Use #B0E0E6 for large background sections, #FFFACD for content panels, and #98FB98 for subtle highlights or icons.

#B0E0E6 · #FFFACD · #98FB98

CSS variables

:root {
  --gelato-dream-swirl-1: #FFFACD;
  --gelato-dream-swirl-2: #FFB6C1;
  --gelato-dream-swirl-3: #98FB98;
  --gelato-dream-swirl-4: #B0E0E6;
  --gelato-dream-swirl-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gelato-dream-swirl": {
        1: "#FFFACD",
        2: "#FFB6C1",
        3: "#98FB98",
        4: "#B0E0E6",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#FFFACD

Color 2#FFB6C1

Color 3#98FB98

Color 4#B0E0E6

Color 5#F5F5DC

Accessibility

Contrast checker

1.6:1Fail

1.2:1Fail

1.4:1Fail

1:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.5:1Fail

1.1:1Fail

1.3:1Fail

Similar palettes

More like Gelato Dream Swirl

Gelato Dream Swirl

See it in context.

Ready when you are.

Built with Gelato Dream Swirl.

How to use Gelato Dream Swirl

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Creamy Delight

Fresh Swirl

Dreamy Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gelato Dream Swirl