Palette

Morning Dew Petal

Fresh and delicate pastels, like dew-kissed petals at the break of dawn.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Morning Dew Petal 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 Morning Dew Petal.

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

Data visualization

#FDDDE6#E0FFFF#ADD8E6#D8BFD8#EEDDFF

Palette guide

How to use Morning Dew Petal

Overview

The Morning Dew Petal palette offers fresh and delicate pastels, like dew-kissed petals at the break of dawn. This enchanting collection, featuring soft pink #FDDDE6, serene aqua #E0FFFF, and gentle lavender #EEDDFF, is ideal for designs seeking to convey tenderness, freshness, and dreamy elegance. The balanced mid-tones such as #ADD8E6 and #D8BFD8 provide excellent versatility for subtle gradients and layered visual effects, offering depth without being overpowering. Designers and developers will find this palette superb for creating harmonious interfaces that feel serene and approachable. Its diverse yet cohesive nature allows for distinct visual hierarchy while maintaining an overall sense of calm and natural beauty, perfect for romantic or whimsical projects.

Best used for

Feminine brand identities and marketing
Wedding and event planning materials
Children's clothing or toy design
Beauty and cosmetic product packaging
Fantasy-themed digital art and illustrations
Relaxation and mindfulness app interfaces

Suggested color roles

primary

#ADD8E6 - A soft, cool blue that provides a refreshing and stable foundation for main content, navigation, and key headings.

secondary

#D8BFD8 - A gentle lavender, excellent for subheadings, secondary navigation, or subtle background elements, adding a touch of romance.

accent

#FDDDE6 - A delicate pink, ideal for calls-to-action, highlights, or subtle branding elements that require a soft focal point.

background

#E0FFFF - The lightest, airy aqua shade, providing a clean, expansive canvas that enhances readability and contributes to a serene user experience.

text

#ADD8E6 - A cool, legible blue for body text on light backgrounds, or a dark plum like #5C4B5C for enhanced readability and elegance.

Accessibility notes

Ensure #ADD8E6 or #D8BFD8 text has sufficient contrast against #E0FFFF or #FDDDE6 backgrounds.
Avoid using #E0FFFF or #FDDDE6 for small text on pure white backgrounds due to extremely low contrast.
For critical information, pair the darkest suitable shade, #ADD8E6, with the lightest, #E0FFFF, to meet WCAG AA contrast guidelines.
Consider using a dark grey text (#444444) for all body copy to guarantee maximum readability across varying background elements from this palette.

Recommended combinations

Petal Harmony

A soft, harmonious combination for primary branding, clear hierarchies, and gentle interfaces.

#FDDDE6 · #ADD8E6 · #EEDDFF

Dewy Blush

Soft, layered look ideal for hero sections, subtle branding, or tranquil background gradients with a romantic feel.

#E0FFFF · #D8BFD8 · #FDDDE6

Lavender Mist

Dynamic and ethereal for interactive elements, data visualization, or highlighting key information on a lighter canvas.

#ADD8E6 · #EEDDFF · #D8BFD8

CSS variables

:root {
  --morning-dew-petal-1: #FDDDE6;
  --morning-dew-petal-2: #E0FFFF;
  --morning-dew-petal-3: #ADD8E6;
  --morning-dew-petal-4: #D8BFD8;
  --morning-dew-petal-5: #EEDDFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-dew-petal": {
        1: "#FDDDE6",
        2: "#E0FFFF",
        3: "#ADD8E6",
        4: "#D8BFD8",
        5: "#EEDDFF",
      }
    }
  }
}

Hex values

Color 1#FDDDE6

Color 2#E0FFFF

Color 3#ADD8E6

Color 4#D8BFD8

Color 5#EEDDFF

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

1:1Fail

1.2:1Fail

1.4:1Fail

1.6:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

Similar palettes

More like Morning Dew Petal

Morning Dew Petal

See it in context.

Ready when you are.

Built with Morning Dew Petal.

How to use Morning Dew Petal

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Petal Harmony

Dewy Blush

Lavender Mist

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Morning Dew Petal