Palette

Dusty Rose Garden

Gentle and muted, like the faded charm of an old rose garden under a soft afternoon sun.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C8999B#DDAEB0#EED7D8#F7E9EA#A27678

Palette guide

How to use Dusty Rose Garden

Overview

The Dusty Rose Garden palette captures the gentle and muted charm of an old rose garden under a soft afternoon sun. This elegant collection features delicate shades like #F7E9EA and #EED7D8, providing a light, airy base. Progressing to #DDAEB0 and #C8999B, it culminates in the grounding #A27678, a deeper, sophisticated rose-brown. Ideal for designers and developers seeking to evoke a sense of romance, vintage appeal, and quiet sophistication, this palette is versatile for both digital and physical applications. It excels in creating serene and inviting experiences, conveying warmth and timeless beauty without overwhelming vibrancy.

Best used for

Romantic brand identities
Vintage-themed web designs
Wedding and event decor
Feminine fashion collections
Beauty product packaging
Cozy interior design accents

Suggested color roles

primary

#DDAEB0 - A balanced, soft rose hue, perfect for main design elements or brand accents.

secondary

#C8999B - A slightly deeper, muted rose, ideal for supporting content or secondary interactive elements.

accent

#A27678 - The deepest, most grounding shade, excellent for impactful accents or calls-to-action.

background

#F7E9EA - The lightest, almost white, providing a gentle and clean canvas.

text

#A27678 - A deep, readable rose-brown, ensuring strong contrast on lighter palette colors.

Accessibility notes

Ensure sufficient contrast when using #F7E9EA or #EED7D8 for text; always pair with a very dark color like #A27678.
The darker shades like #A27678 and #C8999B offer good contrast for text on #F7E9EA or #EED7D8 backgrounds.
Avoid using #DDAEB0 for text on #C8999B as the contrast may be insufficient for readability.
Test all text/background color combinations with WCAG 2.1 AA guidelines, particularly for small text.

Recommended combinations

Soft Bloom

Gentle background gradients, layered UI elements, or subtle graphic details.

#F7E9EA · #EED7D8 · #DDAEB0

Vintage Contrast

High-contrast headings, buttons, or important information against a light backdrop.

#A27678 · #F7E9EA · #DDAEB0

Harmonious Depth

Creating balanced content blocks or decorative elements with a sense of gentle sophistication.

#C8999B · #DDAEB0 · #EED7D8

CSS variables

:root {
  --dusty-rose-garden-1: #C8999B;
  --dusty-rose-garden-2: #DDAEB0;
  --dusty-rose-garden-3: #EED7D8;
  --dusty-rose-garden-4: #F7E9EA;
  --dusty-rose-garden-5: #A27678;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusty-rose-garden": {
        1: "#C8999B",
        2: "#DDAEB0",
        3: "#EED7D8",
        4: "#F7E9EA",
        5: "#A27678",
      }
    }
  }
}

Hex values

Color 1#C8999B

Color 2#DDAEB0

Color 3#EED7D8

Color 4#F7E9EA

Color 5#A27678

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.1:1Fail

1.6:1Fail

1.3:1Fail

1.4:1Fail

1.7:1Fail

2:1Fail

1.8:1Fail

1.4:1Fail

1.2:1Fail

2.8:1Fail

2.1:1Fail

1.7:1Fail

1.2:1Fail

3.3:1AA18

1.6:1Fail

2:1Fail

2.8:1Fail

3.3:1AA18

Similar palettes

More like Dusty Rose Garden

View all pastel

Antique Rose Petal

Antique Rose Petals

Faded Floral Keepsake

Peony Blush Bloom

Rose Garden Path

Vintage Rose Petal