Back to palettes

Palette

Dewdrop Petal Kiss

Soft and ethereal, like the gentle freshness of morning dew on delicate flower petals.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dewdrop Petal Kiss 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 Dewdrop Petal Kiss.

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

Data visualization

#E6F5F2#C4E3DE#A2D1CC#80BEBB#5EAAAB

Palette guide

How to use Dewdrop Petal Kiss

Overview

The Dewdrop Petal Kiss palette is a soft and ethereal collection of cool greens and blues, capturing the gentle freshness of morning dew on delicate flower petals. Ranging from the airy #E6F5F2 to the deeper #5EAAAB, this palette exudes tranquility, cleanliness, and a subtle natural elegance. Designers can leverage these harmonious shades to create serene digital experiences, refreshing branding, or content that promotes calm and well-being. The gradual progression through #C4E3DE, #A2D1CC, and #80BEBB makes it ideal for subtle gradients and layered designs, offering depth without losing its light quality.

Best used for

  • Spa and relaxation services
  • Eco-friendly home goods
  • Baby and children's brands
  • Wellness and self-care content
  • Minimalist nature photography
  • Soft, inviting UI design

Suggested color roles

primary

The deepest shade, #5EAAAB, provides a grounding yet gentle primary color for headings or important calls-to-action.

secondary

Use #80BEBB for subheadings, secondary buttons, or larger graphic elements, maintaining a balanced and soothing feel.

accent

The brighter #A2D1CC can be used for subtle highlights, interactive elements, or to add a touch of fresh vibrancy.

background

The very light #E6F5F2 offers an immaculate, airy canvas that enhances the palette's overall freshness.

text

For body text, #5EAAAB or a dark charcoal provides excellent readability against the lighter backgrounds like #E6F5F2.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades for text on similar backgrounds, e.g., #C4E3DE on #E6F5F2.
  • The darkest color, #5EAAAB, offers strong contrast for text against the lightest shades in the palette.
  • Avoid using #E6F5F2 or #C4E3DE for small text unless paired with a very dark, contrasting background.
  • Pair #5EAAAB with #E6F5F2 for high readability in primary content areas, maintaining a fresh aesthetic.

Recommended combinations

Airy Foundation

Creates a light, spacious background and subtle transitions, perfect for a serene and inviting UI.

#E6F5F2 · #C4E3DE · #A2D1CC

Gentle Contrast

Ideal for primary content, with dark text on a crisp, light background and a balanced secondary tone.

#5EAAAB · #E6F5F2 · #80BEBB

Petal Gradient

Excellent for subtle background elements or layered graphics, adding depth with a smooth, tranquil progression.

#C4E3DE · #A2D1CC · #80BEBB

CSS variables

:root {
  --dewdrop-petal-kiss-1: #E6F5F2;
  --dewdrop-petal-kiss-2: #C4E3DE;
  --dewdrop-petal-kiss-3: #A2D1CC;
  --dewdrop-petal-kiss-4: #80BEBB;
  --dewdrop-petal-kiss-5: #5EAAAB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dewdrop-petal-kiss": {
        1: "#E6F5F2",
        2: "#C4E3DE",
        3: "#A2D1CC",
        4: "#80BEBB",
        5: "#5EAAAB",
      }
    }
  }
}

Related searches

soft aqua green palettefresh morning dew colorscalm floral designpastel green blue brandingethereal nature palette

Palette colors

Hex values

Color 1#E6F5F2
·
Color 2#C4E3DE
·
Color 3#A2D1CC
·
Color 4#80BEBB
·
Color 5#5EAAAB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.4:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
2:1Fail
3
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.6:1Fail
4
1.9:1Fail
1.5:1Fail
1.3:1Fail
1.3:1Fail
5
2.4:1Fail
2:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Dewdrop Petal Kiss

View all pastel