Palette

Pastel Cloud Canvas

Gentle, dreamy pastels that float together like soft clouds at sunrise or sunset.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pastel Cloud Canvas 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 Cloud Canvas.

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

Data visualization

#E0BBE4#957DAD#D29BF5#FFC72C#B1D1E6

Palette guide

How to use Pastel Cloud Canvas

Overview

The Pastel Cloud Canvas palette features gentle, dreamy pastels that float together like soft clouds at sunrise or sunset. Comprising #E0BBE4 (soft lavender), #957DAD (medium purple), #D29BF5 (light violet), #FFC72C (golden yellow), and #B1D1E6 (sky blue), this collection is perfect for designers and developers aiming for a calm, ethereal, and artistic aesthetic. The unexpected vibrant yellow accent adds a touch of warmth and energy to an otherwise serene palette, making it versatile for projects that require both tranquility and a subtle spark. It's a truly enchanting and balanced selection.

Best used for

Dreamy brand identities and logos
Wellness and meditation application UI
Artistic portfolios and creative websites
Event branding for creative workshops
Serene interior design concepts
Fashion lookbooks with an ethereal feel

Suggested color roles

primary

Utilize #E0BBE4 as a gentle and inviting core, providing a soft and expansive primary for your design.

secondary

Employ #B1D1E6 to add a cool, expansive feel, perfect for complementary sections or backgrounds.

accent

Apply #FFC72C for a vibrant, warm pop of energy, ideal for calls to action, important highlights, or playful graphics.

background

Use #D29BF5 as a soft, dreamy background, creating an ethereal canvas that enhances other palette colors.

text

For optimal readability, use a deep purple text, such as #553366, or charcoal for strong contrast against these pastels.

Accessibility notes

The vibrant #FFC72C will stand out strongly; use it purposefully and check its contrast against adjacent colors.
Ensure text on #E0BBE4 and #B1D1E6 has sufficient contrast with dark text to meet WCAG accessibility standards.
#957DAD can be used for text on lighter backgrounds, but always verify readability for body copy.
Test the contrast of #FFC72C against #D29BF5 if used together for critical elements to ensure legibility.

Recommended combinations

Dreamy UI

Design a dreamy user interface: #B1D1E6 for the background, #E0BBE4 for card elements, and #FFC72C for prominent buttons.

#B1D1E6 · #E0BBE4 · #FFC72C

Ethereal Layout

Create an ethereal section: #D29BF5 for a header, #957DAD for a sub-header, and #FFC72C for a highlight or icon.

#D29BF5 · #957DAD · #FFC72C

Sky Gradient

Combine these for a soft, cloudy background gradient in hero images or decorative panels, adding depth and tranquility.

#E0BBE4 · #B1D1E6 · #D29BF5

CSS variables

:root {
  --pastel-cloud-canvas-2-1: #E0BBE4;
  --pastel-cloud-canvas-2-2: #957DAD;
  --pastel-cloud-canvas-2-3: #D29BF5;
  --pastel-cloud-canvas-2-4: #FFC72C;
  --pastel-cloud-canvas-2-5: #B1D1E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-canvas-2": {
        1: "#E0BBE4",
        2: "#957DAD",
        3: "#D29BF5",
        4: "#FFC72C",
        5: "#B1D1E6",
      }
    }
  }
}

Hex values

Color 1#E0BBE4

Color 2#957DAD

Color 3#D29BF5

Color 4#FFC72C

Color 5#B1D1E6

Accessibility

Contrast checker

2.1:1Fail

1.3:1Fail

1.1:1Fail

2.1:1Fail

1.7:1Fail

2.3:1Fail

1.3:1Fail

1.7:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

2.3:1Fail

1.4:1Fail

1:1Fail

1.1:1Fail

2.3:1Fail

1.3:1Fail

1:1Fail

Similar palettes

More like Pastel Cloud Canvas

Pastel Cloud Canvas

See it in context.

Ready when you are.

Built with Pastel Cloud Canvas.

How to use Pastel Cloud Canvas

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy UI

Ethereal Layout

Sky Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Cloud Canvas