Palette

Whimsical Cloud Float

Soft, airy blues and whites for a palette that feels like floating through clouds.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whimsical Cloud Float 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 Whimsical Cloud Float.

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

Data visualization

#F0F8FF#E0FFFF#ADD8E6#87CEEB#6A5ACD

Palette guide

How to use Whimsical Cloud Float

Overview

The "Whimsical Cloud Float" palette embodies a sense of airy lightness and calm, featuring a spectrum of blues and whites. From the softest Alice Blue (#F0F8FF) and Aqua (#E0FFFF) to the gentle Light Blue (#ADD8E6) and Sky Blue (#87CEEB), anchored by the deeper Slate Blue (#6A5ACD), this palette is designed for projects seeking a serene and dreamy aesthetic. Designers can leverage these hues to create soothing digital environments or tranquil print materials. Developers will find ample options for crafting clean, accessible interfaces, with the darker Slate Blue providing excellent contrast for text against the lighter cloud-like shades. This collection inspires a feeling of peaceful elevation.

Best used for

Spa and wellness brand websites
Travel and tourism brochures (sky/sea themes)
Mobile app interfaces for mindfulness
Infographic backgrounds for calm data
Nursery decor and baby product branding
Educational platforms with a gentle tone

Suggested color roles

primary

#F0F8FF (Alice Blue) - An expansive, near-white base perfect for main backgrounds, providing a clean and airy canvas.

secondary

#ADD8E6 (Light Blue) - Ideal for section headers, secondary navigation, or large UI components to add a subtle cool tone.

accent

#87CEEB (Sky Blue) - Use for calls-to-action, active states, or illustrative highlights to draw attention with a refreshing pop.

background

#E0FFFF (Aqua) - A very light, crisp background alternative that feels fresh and open, supporting readability.

text

#6A5ACD (Slate Blue) - The strongest color in the palette, excellent for primary body text, headlines, and critical UI elements on lighter backgrounds.

Accessibility notes

Ensure #6A5ACD has sufficient contrast against #F0F8FF, #E0FFFF, and #ADD8E6 for all text elements.
Avoid using #F0F8FF, #E0FFFF, or #ADD8E6 for text unless against a significantly darker background outside this palette.
The lighter blues may require careful pairing for text; always verify WCAG compliance for readability.
Consider a slightly darker neutral (e.g., #333333) for small or non-essential text if #6A5ACD feels too vibrant for extensive copy.

Recommended combinations

Sky & Text

Primary page backgrounds, sub-sections, and clear, readable body text for web applications.

#F0F8FF · #ADD8E6 · #6A5ACD

Cloud Accent

Highlighting key features, interactive elements, and providing strong visual hierarchy.

#E0FFFF · #87CEEB · #6A5ACD

Dreamy Gradients

Creating subtle, ethereal gradients for hero sections or background textures in digital designs.

#F0F8FF · #ADD8E6 · #87CEEB

CSS variables

:root {
  --whimsical-cloud-float-1: #F0F8FF;
  --whimsical-cloud-float-2: #E0FFFF;
  --whimsical-cloud-float-3: #ADD8E6;
  --whimsical-cloud-float-4: #87CEEB;
  --whimsical-cloud-float-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whimsical-cloud-float": {
        1: "#F0F8FF",
        2: "#E0FFFF",
        3: "#ADD8E6",
        4: "#87CEEB",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E0FFFF

Color 3#ADD8E6

Color 4#87CEEB

Color 5#6A5ACD

Accessibility

Contrast checker

1:1Fail

1.4:1Fail

1.6:1Fail

4.9:1AA

1:1Fail

1.4:1Fail

1.7:1Fail

5:1AA

1.4:1Fail

1.1:1Fail

3.5:1AA18

1.6:1Fail

1.7:1Fail

1.1:1Fail

3:1AA18

4.9:1AA

5:1AA

3.5:1AA18

3:1AA18

Similar palettes

More like Whimsical Cloud Float

Whispering Cloud Veil

Whimsical Cloud Float

See it in context.

Ready when you are.

Built with Whimsical Cloud Float.

How to use Whimsical Cloud Float

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky & Text

Cloud Accent

Dreamy Gradients

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Whimsical Cloud Float