Palette

Cloud Veil Dream

A gentle, cloud-like palette evoking serenity and a feeling of airy lightness.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Veil Dream 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 Cloud Veil Dream.

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

Data visualization

#F0F4F7#E0E7ED#D0DBE5#B0C4D3#A0B3C4

Palette guide

How to use Cloud Veil Dream

Overview

The Cloud Veil Dream palette is a gentle, cloud-like collection evoking serenity and a feeling of airy lightness. Ranging from the subtle depth of #A0B3C4 to the pristine #F0F4F7, with seamless transitions through #B0C4D3, #D0DBE5, and #E0E7ED, this collection embodies sophisticated minimalism. It's an excellent choice for designers and developers aiming for a clean, tranquil, and understated aesthetic. Leverage these serene hues to create modern websites, ethereal branding, or refined interfaces that convey calm and professionalism without overwhelming the user, fostering a sense of spaciousness and quiet contemplation.

Best used for

Minimalist web design
Luxury spa branding
Ethereal wedding photography
High-end interior design concepts
Meditation app interfaces
Clean corporate communications

Suggested color roles

primary

Use #A0B3C4 as the deepest, anchoring color for main headers, navigation, or strong brand elements. It provides a subtle yet stable foundation.

secondary

Employ #B0C4D3 for supporting sections, subheadings, or secondary content. It offers a softer yet substantial cool blue-grey.

accent

Apply #D0DBE5 for subtle highlights, interactive states, or decorative elements. Its lighter tone provides gentle contrast and refinement.

background

Utilize #F0F4F7 for clean, expansive backgrounds. This very light, almost white-blue creates an airy, serene canvas, promoting readability.

text

For body text on light backgrounds like #F0F4F7 or #E0E7ED, #A0B3C4 provides good readability. Consider a very dark charcoal (#333333) for maximum contrast if needed.

Accessibility notes

Ensure #A0B3C4 text on #F0F4F7 or #E0E7ED backgrounds meets WCAG contrast standards. Other light blue-grey combinations will likely fail.
Avoid using #B0C4D3 or #D0DBE5 text on the lightest backgrounds, as contrast will be insufficient.
Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Dreamy Depth

Ideal for a sophisticated, calm theme. #A0B3C4 for primary, #B0C4D3 for secondary, and #F0F4F7 for a serene background.

#A0B3C4 · #B0C4D3 · #F0F4F7

Cloud Layers

Excellent for subtle gradients or layered UI elements, creating depth without harshness.

#D0DBE5 · #E0E7ED · #B0C4D3

Veiled Horizon

Perfect for a very light, spacious design. #B0C4D3 for key text, with #E0E7ED and #F0F4F7 for layered backgrounds.

#B0C4D3 · #E0E7ED · #F0F4F7

CSS variables

:root {
  --cloud-veil-dream-1: #F0F4F7;
  --cloud-veil-dream-2: #E0E7ED;
  --cloud-veil-dream-3: #D0DBE5;
  --cloud-veil-dream-4: #B0C4D3;
  --cloud-veil-dream-5: #A0B3C4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-veil-dream": {
        1: "#F0F4F7",
        2: "#E0E7ED",
        3: "#D0DBE5",
        4: "#B0C4D3",
        5: "#A0B3C4",
      }
    }
  }
}

Hex values

Color 1#F0F4F7

Color 2#E0E7ED

Color 3#D0DBE5

Color 4#B0C4D3

Color 5#A0B3C4

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.9:1Fail

1.1:1Fail

1.4:1Fail

1.7:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.6:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.9:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Cloud Veil Dream

Cloud Veil Dream

See it in context.

Ready when you are.

Built with Cloud Veil Dream.

How to use Cloud Veil Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dreamy Depth

Cloud Layers

Veiled Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Veil Dream