Back to palettes

Palette

Rose Quartz

Delicate and soft pinks, inspired by the calming beauty of rose quartz, exuding tenderness and grace.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7CAC9#F2D7D5#ECC9C8#E0BBE4#D5ACC9

Palette guide

How to use Rose Quartz

Overview

The Rose Quartz color palette offers a delicate and soothing collection of pastel pinks and soft purples, perfect for creating gentle, inviting designs. Featuring hues like the almost-white #F7CAC9, a calming #F2D7D5, and the slightly deeper #ECC9C8, this palette evokes tenderness and grace. Designers can leverage the subtle lilac undertones of #E0BBE4 and the elegant #D5ACC9 to add depth without losing the overall softness. Ideal for projects aiming for a modern, romantic, or feminine aesthetic, Rose Quartz provides a harmonious foundation for branding, web interfaces, and print materials where a light, airy feel is desired. Its tranquil nature makes it highly adaptable for various soft design applications.

Best used for

  • Feminine branding and logos
  • Wedding invitations and stationery
  • Beauty and skincare product packaging
  • Baby and children's apparel designs
  • Spa and wellness website interfaces
  • Interior design accents for serene spaces

Suggested color roles

primary

Use #F7CAC9 as a dominant background or base for a clean, airy feel.

secondary

Apply #F2D7D5 for supporting elements, cards, or subtle UI sections.

accent

Introduce #D5ACC9 for gentle call-to-action buttons or highlights that need a touch more presence.

background

The very light #F7CAC9 or #F2D7D5 provides an excellent, soft canvas for content.

text

For readability, use dark charcoal or black text. A deep plum (#4A2E4A) could also work for softer contrast against lighter shades.

Accessibility notes

  • Ensure sufficient contrast for text, especially with lighter backgrounds like #F7CAC9.
  • Use darker text colors (e.g., charcoal or deep purple) on light pastels.
  • Avoid using adjacent light pastels for critical information, as differentiation can be difficult.
  • Test color combinations with accessibility checkers for WCAG compliance.

Recommended combinations

Soft Blush

Ideal for gentle gradients, layered background elements, or subtle brand textures.

#F7CAC9 · #F2D7D5 · #ECC9C8

Lilac Kiss

A harmonious blend for romantic themes, UI elements, or illustrative details.

#E0BBE4 · #D5ACC9 · #F2D7D5

Muted Depth

For slightly more defined elements, secondary branding, or visual hierarchy.

#ECC9C8 · #D5ACC9 · #E0BBE4

CSS variables

:root {
  --rose-quartz-1: #F7CAC9;
  --rose-quartz-2: #F2D7D5;
  --rose-quartz-3: #ECC9C8;
  --rose-quartz-4: #E0BBE4;
  --rose-quartz-5: #D5ACC9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rose-quartz": {
        1: "#F7CAC9",
        2: "#F2D7D5",
        3: "#ECC9C8",
        4: "#E0BBE4",
        5: "#D5ACC9",
      }
    }
  }
}

Related searches

pastel pink color schemesoft feminine paletterose quartz hex codesgentle pink and purple colorscalming pastel design

Palette colors

Hex values

Color 1#F7CAC9
·
Color 2#F2D7D5
·
Color 3#ECC9C8
·
Color 4#E0BBE4
·
Color 5#D5ACC9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.1:1Fail
1.3:1Fail
2
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.5:1Fail
3
1:1Fail
1.1:1Fail
1.1:1Fail
1.3:1Fail
4
1.1:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
5
1.3:1Fail
1.5:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Rose Quartz

View all pastel
Powder Bloom
Rose Quartz Radiance
Blushing Peach
Gentle Blossom Whisper
Sakura Cloud Whisper
Soft Blossom Petals