Palette

Rose Garden Path

Delicate and romantic hues, inspired by the soft petals and warm light of a blooming rose garden.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rose Garden Path 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 Rose Garden Path.

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

Data visualization

#DEB8B8#DDA0DD#E6E6FA#F5DEB3#BDB76B

Palette guide

How to use Rose Garden Path

Overview

The "Rose Garden Path" palette presents a delightful collection of soft, romantic pastels, evoking the gentle beauty of a sunlit garden. With a charming rose like #DEB8B8 (Light Fawn) and a whimsical #DDA0DD (Plum), it offers a unique blend of warmth and subtle coolness. The ethereal #E6E6FA (Lavender Blush) provides an airy base, complemented by the sunny #F5DEB3 (Moccasin) and the earthy #BDB76B (Dark Khaki). This palette is perfect for designers and developers seeking to infuse projects with a sense of elegance, softness, and a touch of vintage charm, creating truly inviting and memorable visual experiences.

Best used for

Vintage-inspired branding
Feminine fashion and accessories
Boutique wedding stationery
Children's book illustrations
Home decor and lifestyle blogs
Art and craft websites

Suggested color roles

primary

#DEB8B8 - A soft, inviting primary color for headings, main content blocks, or key graphical elements, conveying warmth and approachability.

secondary

#DDA0DD - Ideal for subheadings, accenting UI elements, or decorative patterns, adding a touch of whimsical elegance.

accent

#BDB76B - A unique, earthy accent for highlights, interactive elements, or subtle calls-to-action, providing a grounded contrast.

background

#E6E6FA - An airy, light background, perfect for main content areas to ensure readability and a gentle, expansive feel.

text

#333333 (dark gray) - For body text, ensuring excellent readability against light backgrounds. Use #DEB8B8 for titles on darker elements.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using light pastels for text.
Test #DEB8B8 for text against #E6E6FA for WCAG AA compliance; a darker text color is often needed.
Avoid using #F5DEB3 for small text on light backgrounds due to potential low contrast.
For body text, a dark neutral like charcoal or black is recommended for optimal readability.

Recommended combinations

Soft Blossom

Creates a dreamy, romantic atmosphere, ideal for wedding themes, delicate branding, or feminine product design.

#DEB8B8 · #DDA0DD · #E6E6FA

Garden Earth

Perfect for nature-inspired designs, evoking warmth and natural elements, suitable for organic brands or eco-friendly content.

#BDB76B · #F5DEB3 · #E6E6FA

Path Contrast

Use these for a balanced, slightly rustic aesthetic in UI elements, banners, or illustrations, providing a harmonious contrast.

#DEB8B8 · #BDB76B · #F5DEB3

CSS variables

:root {
  --rose-garden-path-1: #DEB8B8;
  --rose-garden-path-2: #DDA0DD;
  --rose-garden-path-3: #E6E6FA;
  --rose-garden-path-4: #F5DEB3;
  --rose-garden-path-5: #BDB76B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rose-garden-path": {
        1: "#DEB8B8",
        2: "#DDA0DD",
        3: "#E6E6FA",
        4: "#F5DEB3",
        5: "#BDB76B",
      }
    }
  }
}

Hex values

Color 1#DEB8B8

Color 2#DDA0DD

Color 3#E6E6FA

Color 4#F5DEB3

Color 5#BDB76B

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

1.4:1Fail

1.1:1Fail

1.7:1Fail

1.6:1Fail

1:1Fail

1.5:1Fail

1.7:1Fail

1.1:1Fail

1.7:1Fail

1.4:1Fail

1.6:1Fail

1.1:1Fail

1.6:1Fail

1.1:1Fail

1:1Fail

1.7:1Fail

1.6:1Fail

Similar palettes

More like Rose Garden Path

Rose Garden Path

See it in context.

Ready when you are.

Built with Rose Garden Path.

How to use Rose Garden Path

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Blossom

Garden Earth

Path Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rose Garden Path