#B76E79Rose Gold hex code: #B76E79 · RGB 183, 110, 121. Also called pink gold, red gold.
Rose gold is named after the gold-and-copper alloy used in jewelry; the copper gives it a pink cast. As a flat screen color, the common reference value is #B76E79, a dusty pinkish rose. Real rose gold is metallic, so on screens designers often fake it with a gradient between light and dark rose-gold tones.
Rose gold became hugely popular in tech accessories, jewelry, beauty and weddings in the 2010s. It suits premium, feminine and celebratory designs.
For a metallic feel, use a subtle linear gradient from #E0BFB8 to #B76E79. White text works on the darker rose golds only at large sizes; for body text use dark charcoal. Pair rose gold with blush, cream, charcoal or navy.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#B76E79rgb(183, 110, 121) · reference#E0BFB8rgb(224, 191, 184) · HueWiz pick#C48A7Argb(196, 138, 122) · HueWiz pick#8E4F59rgb(142, 79, 89) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with rose gold's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around rose gold.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#FFF4F5 · text #2D191C · link #A35C68Spring collection
Designed around rose gold.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#1F0E11 · text #F6ECED · link #B76E79Hand-picked combinations that work with rose gold. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on rose gold | 3.80:1 | Fail | AA |
| Black text on rose gold | 5.51:1 | AA | AAA |
| Rose Gold text on white | 3.80:1 | Fail | AA |
| Rose Gold text on near-black #111111 | 4.96:1 | AA | AAA |
| White text on deeper rose gold #A75F6A | 4.67:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #B76E79. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-rose-gold-50: #FFF4F5;
--color-rose-gold-100: #FFE6E8;
--color-rose-gold-200: #FFCBD1;
--color-rose-gold-300: #ECB0B8;
--color-rose-gold-400: #D4919A;
--color-rose-gold-500: #BB737D;
--color-rose-gold-600: #9B5B64;
--color-rose-gold-700: #7D474F;
--color-rose-gold-800: #62343B;
--color-rose-gold-900: #472228;
--color-rose-gold-950: #2E1116;
--color-rose-gold: #B76E79;
}:root {
--rose-gold: #B76E79;
--rose-gold-rgb: 183 110 121;
--rose-gold-light: #FFE6E8;
--rose-gold-dark: #62343B;
}
.btn-rose-gold {
background: #A75F6A;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open rose gold in the Tailwind color generator.
#B76E79 is the value HueWiz uses for rose gold; it equals rgb(183, 110, 121). Other common versions include #E0BFB8 (metallic rose gold), #C48A7A (copper rose gold), #8E4F59 (deep rose gold).
With an HSL hue of 351° and 34% saturation, rose gold reads as a warm red.
Use dark text. White on #B76E79 measures 3.80:1 and black measures 5.51:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #A75F6A.
Try rose gold luxe (#B76E79, #E0BFB8, #FFF8F5); rose gold & navy (#B76E79, #1D3557, #F6F1EE); celebration (#E0BFB8, #C48A7A, #FFFFFF). Each palette above can be copied or opened in the HueWiz studio.
Rose Gold isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.