Back to palettes

Palette

Rose Gold Twilight

A soft, shimmering gradient from muted rose to pearlescent blush, inspired by rose gold.

pastelelegant5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B76E79#D7B9B9#ECC9C9#F7DCDD#F9F0F1

Palette guide

How to use Rose Gold Twilight

Overview

The "Rose Gold Twilight" palette offers a soft, shimmering gradient from muted rose to pearlescent blush, directly inspired by the elegance of rose gold. With colors spanning from the deep #B76E79 to the almost-white #F9F0F1, this palette creates a serene and luxurious atmosphere. Designers and developers can leverage its delicate progression, including #ECC9C9 and #D7B9B9, for sophisticated web backgrounds, high-end branding, or elegant user interfaces that require a gentle yet refined touch.

Best used for

  • Bridal and wedding fashion branding
  • Luxury beauty product packaging
  • Elegant event invitations and decor
  • Feminine lifestyle and wellness brands
  • High-end jewelry displays and websites
  • Spa and tranquil retreat marketing

Suggested color roles

primary

Use #B76E79 as a strong anchor for main headings, important calls-to-action, or brand elements requiring depth.

secondary

Apply #D7B9B9 for supportive text, subheadings, or larger background sections that need a softer, mid-tone presence.

accent

Utilize #ECC9C9 for subtle highlights, interactive elements, or decorative details that require a gentle, luminous pop.

background

Employ #F9F0F1 as a pearlescent, airy background, providing a clean and sophisticated base for all content.

text

For body text, a dark charcoal or black is recommended for optimal readability. For headings, #B76E79 offers excellent contrast against the lightest shades.

Accessibility notes

  • The lightest colors, #F9F0F1, #F7DCDD, and #ECC9C9, are extremely light and require very dark text (e.g., #B76E79 or black) for readability.
  • Avoid using #D7B9B9 for small text on the lightest backgrounds as contrast will be insufficient for WCAG AA standards.
  • Ensure all interactive elements have clear and accessible hover/focus states.
  • Prioritize contrast for essential text and UI elements to ensure usability for all users.

Recommended combinations

Pearlescent Fade

Ideal for subtle background gradients, overlays, or creating a soft, ethereal glow effect in digital interfaces.

#F9F0F1 · #F7DCDD · #ECC9C9

Rose Depth

Perfect for hero sections, brand statements, or impactful content blocks against a clean, luminous backdrop.

#B76E79 · #D7B9B9 · #F9F0F1

Blush Accent

Use for secondary buttons, decorative borders, or small icons that require a gentle yet elegant emphasis.

#ECC9C9 · #F7DCDD · #B76E79

CSS variables

:root {
  --rose-gold-twilight-3-1: #B76E79;
  --rose-gold-twilight-3-2: #D7B9B9;
  --rose-gold-twilight-3-3: #ECC9C9;
  --rose-gold-twilight-3-4: #F7DCDD;
  --rose-gold-twilight-3-5: #F9F0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rose-gold-twilight-3": {
        1: "#B76E79",
        2: "#D7B9B9",
        3: "#ECC9C9",
        4: "#F7DCDD",
        5: "#F9F0F1",
      }
    }
  }
}

Related searches

rose gold gradient palettepearlescent blush colorselegant soft pinkromantic rose tonesluxury pastel scheme

Palette colors

Hex values

Color 1#B76E79
·
Color 2#D7B9B9
·
Color 3#ECC9C9
·
Color 4#F7DCDD
·
Color 5#F9F0F1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
2.5:1Fail
2.9:1Fail
3.4:1AA18
2
2.1:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
2.5:1Fail
1.2:1Fail
1.2:1Fail
1.4:1Fail
4
2.9:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
3.4:1AA18
1.6:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Rose Gold Twilight

View all pastel