Palette

Vintage Rose Petal

A delicate blend of muted pinks and faded mauves, capturing the subtle beauty of an aged rose petal.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Rose Petal 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 Vintage Rose Petal.

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

Data visualization

#9C6A7B#C08C9E#E7B3BF#FAD7DD#6A4A58

Palette guide

How to use Vintage Rose Petal

Overview

The Vintage Rose Petal palette offers a delicate blend of muted pinks and mauves, perfect for projects requiring a soft, nostalgic, and elegant aesthetic. Featuring sophisticated shades like the deep #6A4A58, a foundational mauve, alongside the romantic #9C6A7B and lighter #C08C9E, this collection evokes the subtle beauty of an aged rose. The airy #E7B3BF and nearly ethereal #FAD7DD complete the spectrum, providing excellent options for highlights and backgrounds. Designers can leverage this palette to create serene interfaces, gentle branding, or charming editorial layouts, benefiting from its cohesive, vintage-inspired warmth. It's ideal for conveying a sense of timeless grace and understated luxury in digital and print mediums.

Best used for

Bridal and event invitations
Feminine branding (boutiques, florists)
Interior design concepts (soft furnishings)
Vintage-themed websites or blogs
Packaging for luxury goods
Editorial design (magazines, books)

Suggested color roles

primary

Dominant color for branding, headers, or main content blocks. Offers a sophisticated, muted rose tone like #9C6A7B.

secondary

Supportive color for subheadings, secondary calls-to-action, or graphical elements. Lighter and more approachable, such as #C08C9E.

accent

A deep, rich mauve like #6A4A58 for strong accents, important buttons, or subtle contrast. Use sparingly for impact.

background

A very light, almost off-white pink like #FAD7DD for clean, airy backgrounds, allowing other colors to stand out gently.

text

Use the deep #6A4A58 for headings and prominent text, or a near-black for body text to ensure readability against lighter backgrounds like #FAD7DD.

Accessibility notes

Ensure sufficient contrast between #6A4A58 text and #FAD7DD background for WCAG AA compliance.
Avoid using #E7B3BF text on #FAD7DD backgrounds, as contrast will be very low and hard to read.
For interactive elements, ensure hover/focus states provide clear visual distinction beyond just color change.
Test color combinations with color blindness simulators, especially for distinguishing between similar pinks.

Recommended combinations

Elegant Transition

Gradients, layered design elements, or progressive disclosure in UI.

#6A4A58 · #9C6A7B · #C08C9E

Soft Contrast

Light background with primary content and a strong accent for calls to action.

#FAD7DD · #9C6A7B · #6A4A58

Airy & Refined

Delicate illustrations, wedding stationery, or editorial layouts where softness is key.

#E7B3BF · #C08C9E · #6A4A58

CSS variables

:root {
  --vintage-rose-petal-1: #9C6A7B;
  --vintage-rose-petal-2: #C08C9E;
  --vintage-rose-petal-3: #E7B3BF;
  --vintage-rose-petal-4: #FAD7DD;
  --vintage-rose-petal-5: #6A4A58;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-rose-petal": {
        1: "#9C6A7B",
        2: "#C08C9E",
        3: "#E7B3BF",
        4: "#FAD7DD",
        5: "#6A4A58",
      }
    }
  }
}

Hex values

Color 1#9C6A7B

Color 2#C08C9E

Color 3#E7B3BF

Color 4#FAD7DD

Color 5#6A4A58

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.3:1AA18

1.7:1Fail

1.6:1Fail

1.5:1Fail

2.1:1Fail

2.7:1Fail