Back to palettes

Palette

Pastel Rainbow Swirl

A delightful array of soft, muted colors creating a whimsical and dreamy pastel spectrum.

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

#FFB7B2#FFDAC1#E2F0CB#B5EAD7#C7CEEA

Palette guide

How to use Pastel Rainbow Swirl

Overview

The "Pastel Rainbow Swirl" palette offers a delightful array of soft, muted colors perfect for creating whimsical and dreamy designs. Featuring a harmonious blend of #FFB7B2 (a gentle rose blush), #FFDAC1 (a warm, creamy peach), #E2F0CB (a serene mint green), #B5EAD7 (a calming pastel teal), and #C7CEEA (a delicate lavender-blue), this collection is ideal for projects seeking a lighthearted and inviting aesthetic. Designers can leverage its playful yet sophisticated charm for branding, web interfaces, or illustrative work. Developers will find these hex codes easy to implement for UI elements, ensuring a consistent and pleasant user experience across various platforms. This palette evokes a sense of calm joy and gentle optimism.

Best used for

  • Children's apparel and toy branding
  • Gentle e-commerce websites for crafts or baby products
  • Social media graphics for lifestyle or wellness blogs
  • Nursery decor and interior design inspiration
  • Packaging for delicate baked goods or beauty products
  • Event invitations for baby showers or spring gatherings

Suggested color roles

primary

#FFB7B2 - Use this gentle rose blush for headers, main calls-to-action, or significant brand elements to convey warmth and approachability.

secondary

#B5EAD7 - This calming pastel teal works well for subheadings, secondary buttons, or large background sections to introduce a fresh, airy feel.

accent

#C7CEEA - Apply this delicate lavender-blue for subtle highlights, interactive states, or small decorative elements to add a touch of dreamy sophistication.

background

#E2F0CB - A serene mint green base, offering a soft, unobtrusive canvas that allows other palette colors to stand out gently.

text

#FFDAC1 - Use this warm, creamy peach for softer, less critical text elements or complement with a dark charcoal for readability against lighter backgrounds. Consider a dark neutral like #333333 for main body text.

Accessibility notes

  • Ensure sufficient contrast between #FFB7B2 or #FFDAC1 and any white text; use dark text instead.
  • The lighter colors like #E2F0CB and #B5EAD7 will require dark text (e.g., #333333 or black) for optimal readability.
  • Avoid using light pastel text on light pastel backgrounds; always test contrast ratios, especially for small text.
  • Consider using #C7CEEA as an accent against darker neutrals for better visibility and a pop of color.

Recommended combinations

Soft Gradient

Ideal for subtle background gradients, hero sections, or layered UI components that need a gentle color transition.

#FFB7B2 · #FFDAC1 · #E2F0CB

Dreamy Contrast

Combine for a playful yet balanced look, with the teal as a base, lavender as an accent, and pink for highlights.

#B5EAD7 · #C7CEEA · #FFB7B2

Gentle Pop

Use the mint green as a primary background, peach for content blocks, and teal for interactive elements or buttons.

#E2F0CB · #FFDAC1 · #B5EAD7

CSS variables

:root {
  --pastel-rainbow-swirl-2-1: #FFB7B2;
  --pastel-rainbow-swirl-2-2: #FFDAC1;
  --pastel-rainbow-swirl-2-3: #E2F0CB;
  --pastel-rainbow-swirl-2-4: #B5EAD7;
  --pastel-rainbow-swirl-2-5: #C7CEEA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-rainbow-swirl-2": {
        1: "#FFB7B2",
        2: "#FFDAC1",
        3: "#E2F0CB",
        4: "#B5EAD7",
        5: "#C7CEEA",
      }
    }
  }
}

Related searches

pastel color schemessoft rainbow palettegentle design colorsdreamy pastel hex codeswhimsical UI colors

Palette colors

Hex values

Color 1#FFB7B2
·
Color 2#FFDAC1
·
Color 3#E2F0CB
·
Color 4#B5EAD7
·
Color 5#C7CEEA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.4:1Fail
1.2:1Fail
1.1:1Fail
2
1.3:1Fail
1.1:1Fail
1:1Fail
1.2:1Fail
3
1.4:1Fail
1.1:1Fail
1.1:1Fail
1.3:1Fail
4
1.2:1Fail
1:1Fail
1.1:1Fail
1.2:1Fail
5
1.1:1Fail
1.2:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Pastel Rainbow Swirl

View all pastel
Pastel Rainbow Glaze
Confection Dream Puff
Cotton Candy Dream
Cotton Candy Hues
Pastel Cloud Dream
Pastel Cloud Dream