Palette

Pastel Cloud Kingdom

A soft, ethereal blend of pastel purples and blues, like a kingdom in the clouds.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDA0DD#E6E6FA#ADD8E6#B0E0E6#C0DDEE

Palette guide

How to use Pastel Cloud Kingdom

Overview

The Pastel Cloud Kingdom palette offers a soft, ethereal blend of dreamy purples and blues, evoking a serene sky kingdom. Featuring gentle hues like the enchanting lavender #DDA0DD, the airy sky blue #ADD8E6, and the tranquil periwinkle #E6E6FA, this collection is perfect for creating whimsical and calming designs. Developers will find these light tones excellent for subtle UI elements, while designers can leverage their soft aesthetic for branding that conveys gentleness and imagination. The palette's overall mood is playful yet soothing, making it versatile for various applications seeking a touch of magic and calm.

Best used for

Children's book illustrations and cover art
Baby product branding and packaging
Wedding invitations and stationery
Dreamy website backgrounds and UI elements
Social media graphics for wellness or creative brands
Interior design accents for nurseries or calm spaces

Suggested color roles

primary

Use #DDA0DD as a captivating main brand color for logos or key headings, conveying a sense of whimsy.

secondary

Employ #E6E6FA for supporting content blocks, subtle navigation, or as a soft background complement.

accent

Apply #ADD8E6 to highlight interactive elements, call-to-action buttons, or decorative design details.

background

Utilize #C0DDEE for large background areas to establish a light, airy, and expansive feel.

text

For optimal readability, use a dark charcoal or black text color against these light pastels, ensuring sufficient contrast.

Accessibility notes

Ensure text elements have sufficient contrast against background colors; most pastels will require dark text.
Avoid using light pastel text on other light pastel backgrounds; check WCAG guidelines for AA or AAA compliance.
Reserve #E6E6FA and #C0DDEE for backgrounds, using darker colors for foreground elements.
Consider larger font sizes for any lighter text used on slightly darker pastel backgrounds to improve legibility.

Recommended combinations

Sky Gradient

Create smooth, tranquil sky-like gradients for headers or background sections.

#ADD8E6 · #B0E0E6 · #C0DDEE

Whimsical Duo

Pair these for playful illustrations or distinct UI components that stand out softly.

#DDA0DD · #E6E6FA · #ADD8E6

Gentle Contrast

Apply for subtle branding elements where a gentle yet discernible difference is desired.

#DDA0DD · #C0DDEE · #B0E0E6

CSS variables

:root {
  --pastel-cloud-kingdom-1: #DDA0DD;
  --pastel-cloud-kingdom-2: #E6E6FA;
  --pastel-cloud-kingdom-3: #ADD8E6;
  --pastel-cloud-kingdom-4: #B0E0E6;
  --pastel-cloud-kingdom-5: #C0DDEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cloud-kingdom": {
        1: "#DDA0DD",
        2: "#E6E6FA",
        3: "#ADD8E6",
        4: "#B0E0E6",
        5: "#C0DDEE",
      }
    }
  }
}

Hex values

Color 1#DDA0DD

Color 2#E6E6FA

Color 3#ADD8E6

Color 4#B0E0E6

Color 5#C0DDEE

Accessibility

Contrast checker

1.7:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

Similar palettes

More like Pastel Cloud Kingdom

Pastel Cloud Kingdom

See it in context.

Ready when you are.

Built with Pastel Cloud Kingdom.

How to use Pastel Cloud Kingdom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Gradient

Whimsical Duo

Gentle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Pastel Cloud Kingdom