Palette

Rose Gold Kiss

A sophisticated blend of soft rose and warm gold hues, like a tender, shimmering kiss.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7CAC9#F7BDBC#F0A6A6#E37070#D3494E

Palette guide

How to use Rose Gold Kiss

Overview

The "Rose Gold Kiss" palette is a sophisticated blend of soft rose and warmer, deeper pink hues, reminiscent of a tender, shimmering kiss. Featuring hex codes like the delicate #F7CAC9 and the vibrant #D3494E, this palette offers a luxurious and romantic feel. It transitions smoothly from light, airy blushes to rich, passionate rose tones, making it incredibly versatile for designs that aim for elegance and warmth. Developers and designers can leverage its gradient potential for captivating visual effects and robust branding.

Best used for

Luxury brand packaging
Romantic wedding invitations and stationery
Feminine beauty and cosmetic branding
High-end fashion editorial layouts
Digital interfaces for lifestyle apps
Event decor and floral design concepts

Suggested color roles

primary

Use #D3494E for strong calls-to-action, key headlines, or brand logos where a bold, romantic statement is desired.

secondary

Employ #E37070 for supportive elements, subheadings, or larger sections of color that need depth without being overwhelming.

accent

Apply #F0A6A6 for gentle highlights, interactive elements like hover states, or subtle graphical embellishments.

background

Utilize #F7CAC9 as a soft, airy background that allows other colors to pop, perfect for a clean and elegant canvas.

text

For body text, a deep charcoal or black is recommended for readability. For headings on light backgrounds, #D3494E offers excellent contrast and maintains the palette's romantic mood.

Accessibility notes

Ensure sufficient contrast when pairing lighter shades like #F7CAC9 with text; a dark color like #D3494E or black is crucial.
Avoid using #F7BDBC on #F7CAC9 for text to prevent readability issues due to low contrast.
The darkest color, #D3494E, provides good contrast for text on the lightest background, #F7CAC9, meeting WCAG AA standards.
For interactive elements, ensure hover/focus states have distinct contrast changes from their default state.

Recommended combinations

Soft Gradient

Ideal for subtle background gradients, header areas, or soft visual transitions in web design.

#F7CAC9 · #F7BDBC · #F0A6A6

Bold Statement

Perfect for hero sections, prominent branding, or calls-to-action where strong impact is needed against a light base.

#D3494E · #E37070 · #F7CAC9

Accent Pop

Use for buttons, icons, or small graphical elements that require a gentle yet noticeable emphasis.

#F0A6A6 · #E37070 · #F7BDBC

CSS variables

:root {
  --rose-gold-kiss-1: #F7CAC9;
  --rose-gold-kiss-2: #F7BDBC;
  --rose-gold-kiss-3: #F0A6A6;
  --rose-gold-kiss-4: #E37070;
  --rose-gold-kiss-5: #D3494E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rose-gold-kiss": {
        1: "#F7CAC9",
        2: "#F7BDBC",
        3: "#F0A6A6",
        4: "#E37070",
        5: "#D3494E",
      }
    }
  }
}

Hex values

Color 1#F7CAC9

Color 2#F7BDBC

Color 3#F0A6A6

Color 4#E37070

Color 5#D3494E

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

2.1:1Fail

2.9:1Fail

1.1:1Fail

1.2:1Fail

1.9:1Fail

2.7:1Fail

1.3:1Fail

1.2:1Fail

1.6:1Fail

2.2:1Fail