Rose Gold color palette
Rose gold is a metal, and this palette catches its warmer, pinkish side: dusty rose #B76E79 down through blush to an almost-white #FBF2F2. Saturation is low, so the pinks look grown up. Each step is a gentle move from the last, which makes soft layered layouts easy to build. Jewelry stores and bridal boutiques can use it as is, since it flatters product photos of metal and lace.
Rose Gold palette in use
#FBF2F2 makes the page background and #F4DFE0 the card color. Use #B76E79 for buttons and large headings, and pair body text with a deep plum or charcoal, since #B76E79 is too light for small copy.
This pair measures 19.08:1, so it works for body text too. The button uses #B76E79 with black text.
ButtonGood for
- Jewelry store website
- Bridal boutique branding
- Lash studio menu
- Wedding stationery
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#B76E79 | #FBF2F2 | 3.45:1 | AA large |
Rose Gold palette as code
CSS variables
:root {
--rose-gold-1: #B76E79;
--rose-gold-2: #D4A0A7;
--rose-gold-3: #E8C4C4;
--rose-gold-4: #F4DFE0;
--rose-gold-5: #FBF2F2;
}Tailwind v4
@theme {
--color-rose-gold-1: #B76E79;
--color-rose-gold-2: #D4A0A7;
--color-rose-gold-3: #E8C4C4;
--color-rose-gold-4: #F4DFE0;
--color-rose-gold-5: #FBF2F2;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'rose-gold': {
100: '#B76E79',
200: '#D4A0A7',
300: '#E8C4C4',
400: '#F4DFE0',
500: '#FBF2F2',
},SCSS
$rose-gold-1: #B76E79;
$rose-gold-2: #D4A0A7;
$rose-gold-3: #E8C4C4;
$rose-gold-4: #F4DFE0;
$rose-gold-5: #FBF2F2;JSON
["#B76E79","#D4A0A7","#E8C4C4","#F4DFE0","#FBF2F2"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.