Palette

Cosmic Cloud Drift

Soft purples and pinks merge into an ethereal cloudscape, suggesting distant nebulae gently drifting through space.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Cloud Drift 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 Cosmic Cloud Drift.

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

Data visualization

#483D8B#6A5ACD#836FFF#E6E6FA#FFF0F5

Palette guide

How to use Cosmic Cloud Drift

Overview

The Cosmic Cloud Drift palette presents a tranquil fusion of soft purples and delicate pinks, including #483D8B, #6A5ACD, and the airy #FFF0F5. This ethereal collection beautifully suggests distant nebulae gently drifting through space, offering a calm and dreamy aesthetic. Designers can leverage the pastel tones to create harmonious visual compositions, perfect for conveying serenity and light. Developers will find these hex codes ideal for crafting gentle, inviting user interfaces, from calming app designs to elegant website themes, ensuring a soft visual journey and a soothing user experience across various digital platforms with a touch of cosmic wonder.

Best used for

Wellness and meditation app interfaces
Baby or children's product branding
Elegant wedding or event stationery
Soft lifestyle blog or website design
Digital art with a serene, pastel theme
Interior design inspiration for nurseries or calm spaces

Suggested color roles

primary

Utilize #483D8B as a grounding primary, suitable for main headings, navigational elements, or subtle brand anchors.

secondary

Employ #6A5ACD as a supportive secondary, excellent for subheadings, active states, or larger background sections that need gentle depth.

accent

Apply #836FFF as a bright accent, perfect for highlights, interactive elements, or small details that need a cheerful pop.

background

The pristine #E6E6FA or #FFF0F5 serves as an airy, light background, allowing other colors to softly emerge.

text

For optimal readability, use #483D8B or a dark charcoal on #E6E6FA or #FFF0F5. White text is suitable for #483D8B.

Accessibility notes

Ensure sufficient contrast between #483D8B text and #FFF0F5 background for WCAG AA compliance.
Avoid pairing #E6E6FA and #FFF0F5 for text, as their low contrast makes them unsuitable for readability.
The darker shades like #483D8B and #6A5ACD offer better contrast for text against lighter backgrounds.
For body text on #E6E6FA, consider using #483D8B or #6A5ACD over a standard black for a softer, more cohesive look.

Recommended combinations

Cloudy Serenity

Combine the deeper purples with the lightest pink for a serene header or a gentle background gradient.

#483D8B · #6A5ACD · #FFF0F5

Drifting Hues

Create soft, dreamy gradients or layered elements in UI design, mimicking the gentle drift of cosmic clouds.

#6A5ACD · #836FFF · #E6E6FA

Pastel Contrast

Use #FFF0F5 as a light background, #483D8B for primary text, and #836FFF for subtle accents or interactive elements.

#FFF0F5 · #483D8B · #836FFF

CSS variables

:root {
  --cosmic-cloud-drift-1: #483D8B;
  --cosmic-cloud-drift-2: #6A5ACD;
  --cosmic-cloud-drift-3: #836FFF;
  --cosmic-cloud-drift-4: #E6E6FA;
  --cosmic-cloud-drift-5: #FFF0F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-cloud-drift": {
        1: "#483D8B",
        2: "#6A5ACD",
        3: "#836FFF",
        4: "#E6E6FA",
        5: "#FFF0F5",
      }
    }
  }
}

Hex values

Color 1#483D8B

Color 2#6A5ACD

Color 3#836FFF

Color 4#E6E6FA

Color 5#FFF0F5

Accessibility

Contrast checker

1.7:1Fail

2.5:1Fail

7.4:1AAA

8.2:1AAA

1.7:1Fail

1.4:1Fail

4.3:1AA18

4.8:1AA

2.5:1Fail

1.4:1Fail

3:1AA18

3.3:1AA18

7.4:1AAA

4.3:1AA18

3:1AA18

1.1:1Fail

8.2:1AAA

4.8:1AA

3.3:1AA18

1.1:1Fail

Similar palettes

More like Cosmic Cloud Drift