Palette

Aqua Blossom Dream

Gentle pastel hues reflecting a valley where delicate blossoms sway in a soft, barely-there breeze.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aqua Blossom 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 Aqua Blossom Dream.

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

Data visualization

#C5A3C7#E1BEE7#F4E8F0#A3D8B0#80CBC4

Palette guide

How to use Aqua Blossom Dream

Overview

The Aqua Blossom Dream palette features gentle pastel hues reflecting a valley where delicate blossoms sway in a soft, barely-there breeze. This serene collection ranges from the ethereal #F4E8F0 to the tranquil #80CBC4, with #C5A3C7 and #E1BEE7 providing soft, inviting transitions. Perfect for designs seeking an organic, natural, and subtly restorative aesthetic, these hex codes are ideal for wellness branding, eco-friendly web interfaces, or editorial content focused on nature. Designers and developers will find these colors excellent for crafting serene digital experiences, from herbal product sites to sustainable living platforms, where a calm, authentic aesthetic is desired.

Best used for

Springtime event invitations and decor
Feminine lifestyle blogs and social media
Baby apparel and nursery decor
Beauty and skincare product packaging
Wedding branding and stationery
Soft interior design concepts

Suggested color roles

primary

Utilize #80CBC4 as a vibrant yet soft primary accent for headings, important buttons, or delicate illustrations, providing a calming focal point.

secondary

Employ #A3D8B0 for supporting elements, subheadings, or subtle background panels, offering a slightly deeper aqua without losing serenity.

accent

Apply #C5A3C7 for delicate highlights, interactive states, or subtle graphic details, providing a gentle glow within the pastel spectrum.

background

The lightest tone, #F4E8F0, is perfect as a clean, elegant background, ensuring excellent readability and a refined feel.

text

For optimal legibility, use #80CBC4 or a deep charcoal against the lightest backgrounds like #F4E8F0. For secondary text, #A3D8B0 can be effective on lighter backgrounds.

Accessibility notes

Ensure #80CBC4 text on #F4E8F0 background meets WCAG AA contrast standards.
Avoid pairing #E1BEE7 or #C5A3C7 for small text on #F4E8F0, as contrast will be too low.
Provide clear visual focus indicators for interactive elements, ensuring they stand out against similar background tones.
For critical information, consider using the darkest palette color for text on the lightest background.

Recommended combinations

Blossom Base

Provides a clean, elegant foundation for content with a pristine background and soft, romantic accents.

#F4E8F0 · #80CBC4 · #A3D8B0

Dreamy Pastel

Ideal for layered UI components or subtle branding, creating depth with closely related creamy and aqua tones.

#C5A3C7 · #E1BEE7 · #A3D8B0

Soft Whisper

Excellent for backgrounds with a gentle luminosity or for decorative elements that need a soft, inviting sheen.

#E1BEE7 · #F4E8F0 · #C5A3C7

CSS variables

:root {
  --aqua-blossom-dream-1: #C5A3C7;
  --aqua-blossom-dream-2: #E1BEE7;
  --aqua-blossom-dream-3: #F4E8F0;
  --aqua-blossom-dream-4: #A3D8B0;
  --aqua-blossom-dream-5: #80CBC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aqua-blossom-dream": {
        1: "#C5A3C7",
        2: "#E1BEE7",
        3: "#F4E8F0",
        4: "#A3D8B0",
        5: "#80CBC4",
      }
    }
  }
}

Hex values

Color 1#C5A3C7

Color 2#E1BEE7

Color 3#F4E8F0

Color 4#A3D8B0

Color 5#80CBC4

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1:1Fail

1.1:1Fail

1.9:1Fail

1.4:1Fail

1.6:1Fail

1.4:1Fail

1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Aqua Blossom Dream

Aqua Blossom Dream

See it in context.

Ready when you are.

Built with Aqua Blossom Dream.

How to use Aqua Blossom Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Blossom Base

Dreamy Pastel

Soft Whisper

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Aqua Blossom Dream