Back to palettes

Palette

Sugared Petals

Delicate and ethereal, like the tender hues of blossoming flowers kissed by morning dew.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sugared Petals 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 Sugared Petals.

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

Data visualization

#F0E6EF#DBCFF0#C0B0E0#A59ACD#8C86BE

Palette guide

How to use Sugared Petals

Overview

The Sugared Petals palette presents a delicate and ethereal collection, like the tender hues of blossoming flowers kissed by morning dew, perfect for designs seeking a calm and sophisticated touch. Ranging from the softest #F0E6EF to the deeper #8C86BE, this palette embodies grace and serenity. The muted purples and lavenders, such as #DBCFF0, #C0B0E0, and #A59ACD, are excellent for creating elegant brand identities, tranquil digital interfaces, or sophisticated print materials. Developers can leverage these harmonious tones to build visually soothing user experiences, while designers will find them ideal for projects requiring a blend of subtlety, femininity, and timeless charm, ensuring a refined aesthetic.

Best used for

  • Elegant feminine branding
  • Spa and wellness industry websites
  • Luxury fashion or beauty packaging
  • Sophisticated wedding stationery
  • Calm and minimalist UI designs
  • Art and photography portfolios

Suggested color roles

primary

#C0B0E0 offers a balanced, sophisticated central hue for branding.

secondary

#DBCFF0 provides a lighter, ethereal complement, adding softness.

accent

#8C86BE gives the deepest, most grounded accent for emphasis or strong elements.

background

#F0E6EF serves as the lightest, most airy base for a clean, expansive canvas.

text

#A59ACD can be used for larger headings, but a dark charcoal or black is recommended for body text on lighter backgrounds for optimal readability.

Accessibility notes

  • Many colors are light; a dark neutral (e.g., #333333) should be used for body text on lighter backgrounds to ensure readability.
  • Contrast between adjacent palette colors is generally low; avoid using them for essential text pairings.
  • For interactive elements, ensure sufficient contrast and clear visual feedback for hover/focus states.
  • Consider larger font sizes or bolder weights when using palette colors for headings to improve legibility.

Recommended combinations

Ethereal Gradient

Creates soft, flowing backgrounds or subtle overlays, ideal for a dreamy aesthetic.

#F0E6EF · #DBCFF0 · #C0B0E0

Sophisticated Depth

Perfect for adding structure and elegance to headers, footers, or feature sections.

#C0B0E0 · #A59ACD · #8C86BE

Gentle Highlight

Useful for establishing a clear visual hierarchy with a light base and a strong accent.

#F0E6EF · #A59ACD · #8C86BE

CSS variables

:root {
  --sugared-petals-1: #F0E6EF;
  --sugared-petals-2: #DBCFF0;
  --sugared-petals-3: #C0B0E0;
  --sugared-petals-4: #A59ACD;
  --sugared-petals-5: #8C86BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugared-petals": {
        1: "#F0E6EF",
        2: "#DBCFF0",
        3: "#C0B0E0",
        4: "#A59ACD",
        5: "#8C86BE",
      }
    }
  }
}

Related searches

soft floral color palettedelicate lavender shadescalm purple pink schemeelegant feminine colorsethereal pastel design

Palette colors

Hex values

Color 1#F0E6EF
·
Color 2#DBCFF0
·
Color 3#C0B0E0
·
Color 4#A59ACD
·
Color 5#8C86BE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.1:1Fail
2.8:1Fail
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.3:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.7:1Fail
4
2.1:1Fail
1.8:1Fail
1.3:1Fail
1.3:1Fail
5
2.8:1Fail
2.3:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Sugared Petals

View all pastel