Palette

Sweet Pea Delight

Delicate pinks and purples capturing the enchanting charm and softness of sweet pea flowers.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Pea Delight 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 Sweet Pea Delight.

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

Data visualization

#FFD4DB#FFADD0#D297D6#A68CCF#8E7AC0

Palette guide

How to use Sweet Pea Delight

Overview

The "Sweet Pea Delight" palette offers delicate pinks and purples, capturing the enchanting charm and softness of sweet pea flowers. This vibrant yet gentle collection includes a soft pink (#FFD4DB), a medium pink (#FFADD0), a muted rose-purple (#D297D6), a gentle lavender (#A68CCF), and a deeper violet (#8E7AC0). It’s ideal for designers and developers seeking to create playful, feminine, and sophisticated designs. The progression from light pinks to deeper purples provides depth and versatility, making it perfect for branding, digital illustrations, or UI elements that benefit from a rich yet soft floral aesthetic.

Best used for

Floral arrangement branding and websites
Feminine fashion accessories and apparel
Children's party invitations and decor
Beauty and cosmetic product design
Artistic digital illustrations
Spring garden event themes

Suggested color roles

primary

A medium pink (#FFADD0), ideal for main branding elements, hero sections, or prominent features that need to convey vibrancy and softness.

secondary

A gentle lavender (#A68CCF), excellent for balancing the pinks, providing a calm and sophisticated secondary color for navigation or content blocks.

accent

A deeper violet (#8E7AC0), perfect for bold accents, call-to-action buttons, or small details that need a strong, elegant pop and depth.

background

A soft pink (#FFD4DB), offering a clean and gentle canvas that allows the other delicate hues to shine, maintaining an airy yet colorful feel.

text

For optimal readability, use a dark gray like #333333 or black for body text, ensuring strong contrast, especially against lighter pinks.

Accessibility notes

Ensure sufficient contrast for text, especially with lighter pinks; use dark text (e.g., black, dark gray) for body copy to meet WCAG standards.
The deeper purples (#A68CCF, #8E7AC0) can be used for larger text elements on very light backgrounds, but always verify contrast.
Interactive elements should be clearly distinguishable; consider using a darker outline or a subtle shadow for buttons against similar hues.
Avoid placing light pink text on other light pinks; always opt for high contrast pairings for readability and accessibility.

Recommended combinations

Floral Gradient

Ideal for creating smooth, captivating gradients in backgrounds, artistic illustrations, or elegant UI transitions.

#FFD4DB · #D297D6 · #8E7AC0

Vibrant Bloom

Excellent for eye-catching branding, playful digital elements, or sections that need a lively yet soft visual appeal.

#FFADD0 · #A68CCF · #FFD4DB

Deep Elegance

Best for sophisticated headings, subtle patterns, or design elements requiring depth and a rich, luxurious feel.

#D297D6 · #A68CCF · #8E7AC0

CSS variables

:root {
  --sweet-pea-delight-1: #FFD4DB;
  --sweet-pea-delight-2: #FFADD0;
  --sweet-pea-delight-3: #D297D6;
  --sweet-pea-delight-4: #A68CCF;
  --sweet-pea-delight-5: #8E7AC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-pea-delight": {
        1: "#FFD4DB",
        2: "#FFADD0",
        3: "#D297D6",
        4: "#A68CCF",
        5: "#8E7AC0",
      }
    }
  }
}

Hex values

Color 1#FFD4DB

Color 2#FFADD0

Color 3#D297D6

Color 4#A68CCF

Color 5#8E7AC0

Accessibility

Contrast checker

1.3:1Fail

1.7:1Fail

2.2:1Fail

2.8:1Fail

1.3:1Fail

1.7:1Fail

2.1:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

2.2:1Fail

1.7:1Fail

1.3:1Fail

2.8:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

Similar palettes

More like Sweet Pea Delight

Sweet Pea Delight

See it in context.

Ready when you are.

Built with Sweet Pea Delight.

How to use Sweet Pea Delight

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Floral Gradient

Vibrant Bloom

Deep Elegance

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sweet Pea Delight