Back to palettes

Palette

Pastel Rainbow Swirl

A cheerful mix of soft, muted pastel hues that swirl like a gentle rainbow dream.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Rainbow 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 Pastel Rainbow Swirl.

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

Data visualization

#F0F2E6#D8E8F0#B0D8E6#A6C2E0#C2B0E6

Palette guide

How to use Pastel Rainbow Swirl

Overview

The "Pastel Rainbow Swirl" palette (ID: pastel-rainbow-swirl) presents a cheerful mix of soft, muted pastel hues that swirl like a gentle rainbow dream. This collection is anchored by #F0F2E6, a very light cream, complemented by #D8E8F0, a delicate sky blue, and #B0D8E6, a slightly deeper, serene blue. #A6C2E0 introduces a touch of cool lavender-blue, while #C2B0E6 rounds out the spectrum with a soft, ethereal purple. It's an excellent choice for designers aiming for a vibrant yet understated aesthetic, perfect for digital interfaces, branding, or print materials that require a touch of whimsical charm and a serene feel.

Best used for

  • Baby product packaging and branding
  • Gentle educational apps or websites
  • Wedding or event stationery with a soft theme
  • Social media templates for lifestyle brands
  • Interior design concepts for serene spaces
  • Craft and DIY project websites

Suggested color roles

primary

#B0D8E6 - Use this serene medium blue for main headers, prominent graphics, or primary calls-to-action to establish a calm and inviting tone.

secondary

#C2B0E6 - This soft purple is ideal for subheadings, secondary buttons, or illustrative elements, adding a touch of gentle creativity.

accent

#A6C2E0 - Apply this cool lavender-blue for subtle highlights, interactive states, or small decorative details, providing a harmonious contrast.

background

#F0F2E6 - A very light, almost off-white cream that serves as a clean, airy canvas, allowing other colors to pop gently.

text

#D8E8F0 - Best for very light, decorative text; for body text, use a dark neutral like #4A4A4A to ensure readability against light backgrounds.

Accessibility notes

  • Most palette colors are too light for white text; always use dark text (e.g., #333333) for readability.
  • Ensure sufficient contrast when combining #D8E8F0 or #F0F2E6 with any text or interactive elements.
  • The lighter blues like #B0D8E6 might pass contrast with white text for large headings, but check WCAG guidelines.
  • Avoid using #F0F2E6 as a background for text unless the text is very dark and large; it's best for spacious areas.

Recommended combinations

Sky Serenity

Creates a calming, ethereal gradient perfect for backgrounds, headers, or large UI sections requiring a light touch.

#F0F2E6 · #D8E8F0 · #B0D8E6

Playful Harmony

Combine these three for a vibrant yet soft look, with the blues grounding the playful purple accents.

#B0D8E6 · #A6C2E0 · #C2B0E6

Gentle Pop

Use the lightest cream as a background, purple for key elements, and the medium blue for secondary information or buttons.

#F0F2E6 · #C2B0E6 · #B0D8E6

CSS variables

:root {
  --pastel-rainbow-swirl-1: #F0F2E6;
  --pastel-rainbow-swirl-2: #D8E8F0;
  --pastel-rainbow-swirl-3: #B0D8E6;
  --pastel-rainbow-swirl-4: #A6C2E0;
  --pastel-rainbow-swirl-5: #C2B0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-rainbow-swirl": {
        1: "#F0F2E6",
        2: "#D8E8F0",
        3: "#B0D8E6",
        4: "#A6C2E0",
        5: "#C2B0E6",
      }
    }
  }
}

Related searches

cheerful pastel colorssoft blue purple palettelight rainbow designgentle UI color schemeserene pastel branding

Palette colors

Hex values

Color 1#F0F2E6
·
Color 2#D8E8F0
·
Color 3#B0D8E6
·
Color 4#A6C2E0
·
Color 5#C2B0E6
·

Accessibility

Contrast checker

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

Similar palettes

More like Pastel Rainbow Swirl

View all pastel
Gumball Machine Joy
Pastel Rainbow Glaze
Pastel Rainbow Swirl
Whimsy Sugar Confection
Bubblegum Pop Sky
Candy Cloud Dream