Rose gold carries the hex code #B76E79, which resolves to rgb(183, 110, 121) and hsl(351, 34%, 58%). It’s a muted, desaturated pink-red, and the 34% saturation is what separates it from the pinks around it.
Rose gold is also the most accessible color in this cluster: at 3.8:1 on white it clears the large-text bar, and its dark variant #89525B passes AA at 6.14:1. You’ll get every code format, the computed palettes, the four elements where it performs, and the reason a flat hex only tells half the story.
What Is the Color Rose Gold?
Rose gold sits at 351° on the color wheel, nine degrees short of pure red, which gives it the faint cool lean that keeps it from reading as salmon. No CSS keyword maps to it, so the value comes from convention.
The full code set for #B76E79:
- HEX: #B76E79
- RGB: rgb(183, 110, 121)
- RGBA: rgba(183, 110, 121, 1)
- HSL: hsl(351, 34%, 58%)
- HSB: 351, 40, 72
- CMYK: 0, 40, 34, 28
The CMYK reading is unusual for a pink. At 28% key coverage there’s real black in the mix, which is what makes rose gold read as muted rather than bright, and it’s why the color survives print better than a saturated pink does.
Sources disagree, and the disagreement is larger than for most colors. Canva and Adobe publish #B76E79, Figma uses #DEA193, and HTML Color Codes lists #E0BFB8, spanning a range from a mid-tone dusty rose to a pale blush.
Pin the token before the name drifts. #B76E79 is the most widely cited value and the one this page uses throughout.
Why Does Rose Gold Need a Gradient?
Rose gold is a metal alloy, and a flat hex can’t represent a metal any more than it can represent silver. The real material is gold mixed with copper, sometimes with a little silver, and the copper ratio is what pushes the color pinker or more golden.
The consequence for screen work is specular reflection. Metal produces bright highlights and dark falloff across one surface at the same time, and a single luminance value has no way to encode that range.
Gradients are the workaround, and rose gold needs a warmer set of stops than silver does.
A convincing rose gold gradient runs from a pale highlight near #E3C6CB, through the base at #B76E79, down to a copper-toned falloff around #72454C. That swing is what the eye reads as reflection rather than paint.
Warm the falloff rather than just darkening it. A neutral dark stop makes the gradient look like dusty pink plastic, while a copper-leaning stop reads as metal.
Flat #B76E79 is still a perfectly good color. It just isn’t rose gold in the metallic sense, and knowing which one your design needs prevents a lot of back and forth with stakeholders.
How Does Rose Gold Appear on Digital Screens?
Rose gold renders reliably across panels because its moderate saturation keeps it well inside the sRGB gamut. It doesn’t clip on narrow-gamut displays the way a saturated pink does.
The contrast numbers are the friendliest in this cluster:
- #B76E79 on white: 3.8:1, large text and non-text only
- #B76E79 on black: 5.52:1, passes AA
- Dark variant #89525B on white: 6.14:1, passes AA
- Bright variant #BC7681 on #1D0C0F: 5.44:1, passes AA
- White text on #B76E79: 3.8:1, large text only
Rose gold is one of the few colors in this range that works in both light and dark mode without a large value shift. The base clears AA on black and the dark variant clears AA on white, so a single hue family covers both themes.
The 3.8:1 figure is the one to remember. It covers headings, large labels, borders, and icons on white, and it misses body copy by a small margin.
Warm ambient light exaggerates the gold cast. Under incandescent lighting rose gold drifts toward copper and under cool office light it drifts toward mauve, so check the surface before committing brand assets.
What Are the Shades of Rose Gold?
Shades come from mixing black into #B76E79 while holding hue near 351°:
- #A0606A
- #89525B
- #72454C
- #5C373C
- #45292D
- #2E1C1E
- #170E0F
The useful step is #89525B at 6.14:1 on white, which passes AA for body copy while keeping the rose character. That single value is what makes rose gold viable as a text color where most pinks aren’t.
Tints run toward white through #BF7D86, #C68B94, #CD9AA2, #D5A9AF, #DCB7BD, #E3C6CB, #EAD5D8, and #F2E4E6. Those pale steps handle banner fills, hover surfaces, and the highlight end of a metallic gradient.
Tones drain the hue toward neutral through #AE717A, #A5747B, #9C777C, #927A7E, and #897D7F. Rose gold desaturates into a warm gray rather than a pink, which is worth knowing if your design system generates tones automatically.
Named neighbors span a wide range:
- Old rose (#C08081): the nearest, warmer, 3.16:1 on white
- Blush (#DE5D83): brighter and pinker, 3.5:1
- Puce (#CC8899): lighter and cooler, 2.78:1
- Copper (#B87333): the metallic cousin, pushed to orange, 3.79:1
- Pale pink (#DEA193): Figma’s rose gold, much lighter, 2.18:1
What UI Elements Work Best with Rose Gold?
Rose gold belongs on elements that carry brand character and can use a color that reads as considered rather than urgent. At 3.8:1 on white it handles anything large or non-text, and the #89525B shade extends it into body copy.
That rules out small text at the base value and any status role, since rose gold carries no severity meaning. Four element types are where it genuinely performs.
Primary Buttons and CTAs
Rose gold makes a workable primary button, though the label needs care. White on #B76E79 sits at 3.8:1 and covers large text only, so a button label at 18px bold passes and a 14px label doesn’t.
Drop the fill to #89525B when the label is small. White on that shade reaches 6.14:1 and passes AA at every size, which is the safer default for a design system.
Hover states come from the shade ramp. Stepping to #A0606A on hover keeps the hue stable, where an opacity shift changes the effective contrast against whatever sits behind it.
Brand Accents and Large Headings
Headings are where the base value earns its place. At 3.8:1 rose gold clears the 3:1 large-text bar, so display type, section headers, and pull quotes can carry the brand color directly.
Keep body copy in near-black. The heading can be rose gold and the paragraph beneath it can’t, which is a normal split in editorial design rather than a compromise.
Icons and rules follow the same rule. Non-text elements need 3:1, and rose gold clears it, so borders and glyphs work at the base value.
Data Visualizations
Charts use rose gold as a warm categorical series that separates cleanly from blues and greens. Its muted saturation means it doesn’t dominate a plot the way a bright pink would.
It also pairs naturally with its own shade ramp. A three-series chart in #B76E79, #89525B, and #DCB7BD reads as one coherent family, which suits comparisons of the same metric across periods.
Keep it out of the severity ladder. Rose gold has no conventional status meaning, so use it for categories rather than for good-versus-bad.
Dark Mode Accents
Dark mode needs almost no adjustment, which is unusual. The bright variant #BC7681 on the computed surface #1D0C0F reaches 5.44:1 and passes AA, only a fraction off the base value’s behavior.
That stability is rose gold’s quiet advantage. A single token family covers both themes with one shade step, where most colors need separately tuned light and dark values.
What Are the Best Rose Gold Color Palettes for UI?
Every palette below comes from rotating hue around #B76E79 at fixed saturation and lightness. Because saturation is moderate rather than extreme, these schemes produce usable values rather than the neon sets a full-saturation base generates.
Monochromatic
Monochromatic holds hue at 351° and moves lightness: #B76E79, #763A43, and #DEBCC1. The three steps map to base, text, and surface with no extra work.
#763A43 is the anchor. At 8.6:1 on white it passes AAA and handles headings and body copy alike, which gives a rose gold system a genuine text color.
Analogous
Analogous pulls neighbors 30° in each direction: #B76E79, #B7886E, and #B76E9E. A warm tan and a mauve flanking the rose, all at matched lightness.
This is the most natural of the five for a brand palette. The tan carries the gold association that rose gold implies, and the mauve gives you a cool counterweight.
Complementary
The complement sits opposite at 171°: #B76E79 paired with #6EB7AC, a muted teal. Warm against cool at equal lightness and saturation, which produces separation without either value shouting.
Teal at #6EB7AC reaches 2.2:1 on white, so treat it as a fill or a dark-mode value rather than a text color. Visily’s theme tools can generate the shade ladder for both values so hover and active states come out accessible.
Triadic
Triadic gives you #B76E79, #79B76E, and #6E79B7: rose, sage, and periwinkle. Muted and evenly spaced, which makes it the best categorical set of the five.
All three sit at the same lightness and saturation, so each series reads as an equal member. That’s exactly what a category palette should do.
Split-Complementary
Split-complementary softens the pairing: #B76E79, #6EB788, and #6E9EB7. Rose with a sage green and a dusty blue, and the most flexible of the five for a full interface.
The dusty blue carries the interactive load. Darkened to pass AA it handles links and primary actions while rose gold stays reserved for brand moments.
Which Colors Are Similar to Rose Gold?
Five named colors sit close enough to #B76E79 to substitute for it, and each moves the contrast math:
- Old rose (#C08081): the nearest neighbor, slightly warmer, 3.16:1 on white
- Blush (#DE5D83): brighter and more saturated, 3.5:1
- Puce (#CC8899): lighter and cooler, 2.78:1
- Copper (#B87333): the metallic relative pushed to orange, 3.79:1
- Pale pink (#DEA193): the value Figma publishes as rose gold, 2.18:1
Copper is the interesting comparison. At nearly identical contrast on white it occupies the same tonal slot with a completely different hue, which is why the two read as siblings in a metallic palette.
Figma’s #DEA193 is a genuinely different design decision, not an error. It’s a pale blush that suits illustration and large surfaces where #B76E79 suits type and controls, so pick by the job rather than by the label.
Which Colors Pair Best with Rose Gold?
Deep charcoal is rose gold’s essential partner. Near-black at #1F1F1F reaches well past AAA against a rose gold surface and provides the text weight the color itself can’t at small sizes.
Muted teal from the complementary scheme is the natural accent. #6EB7AC sits opposite at matched saturation, so the pairing reads as designed rather than as a collision.
Warm neutrals amplify it. Cream, sand, and soft taupe surfaces let rose gold read as intentional, while cool grays pull it toward mauve and make it look like a printing error.
Deep green is the sophisticated option. A forest or emerald at high contrast against rose gold produces the jewel-tone pairing that luxury and editorial brands reach for.
Apply the 60-30-10 split:
- 60% warm neutral: cream, off-white, or charcoal surfaces
- 30% rose gold and its tints: brand surfaces, headings, and fills
- 10% accent: the teal or deep green carrying interactive meaning
Rose gold tolerates a larger share than most accent colors. Its low saturation means a 30% presence reads as a brand palette rather than as noise.
Which Colors Should You Avoid Pairing with Rose Gold?
Two computed near-clashes cause the most trouble: #B7816E and #B76E98. Both sit 25° away at identical lightness and saturation, so the boundary between them offers hue difference with no luminance difference.
Saturated pink is the bigger practical problem. A bright pink beside rose gold makes the rose gold look faded and accidental rather than muted and deliberate.
Cool gray is the third trap. Rose gold reads warm, and a cool neutral beside it drags the perceived hue toward mauve, which is the most common complaint about rose gold in production interfaces.
Avoid white text at small sizes on the base fill. At 3.8:1 a 14px white label fails, and the failure is easy to miss in review because the same label passes at 20px.
Does Rose Gold Meet Accessibility Standards?
Rose gold clears the large-text and non-text bars on white and misses AA for body copy. The 3.8:1 measurement sits above the 3:1 threshold and below the 4.5:1 threshold set by the W3C.
Where it lands across the common pairings:
- #B76E79 on white: 3.8:1, passes for large text and non-text, fails AA for body
- White on #B76E79: 3.8:1, large text only
- #89525B on white: 6.14:1, passes AA
- #763A43 on white: 8.6:1, passes AAA
- #BC7681 on #1D0C0F: 5.44:1, passes AA
That ladder is unusually convenient. Three values in the same hue family cover large text, body text, and AAA respectively, so a rose gold design system doesn’t need to borrow a neutral for its type.
Color vision deficiency affects rose gold less than saturated pinks. Under protanopia and deuteranopia it shifts toward a warm gray-brown, which preserves its function as a brand surface and weakens it as a category marker.
Verify any multi-series chart under simulation. Rose gold and copper converge almost completely for users with red-green deficiency, so those two shouldn’t sit in the same legend.
How Can You Convert Rose Gold Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same rose from a different angle:
- HEX #B76E79: the default in design files and CSS
- RGB rgb(183, 110, 121): the three channels in decimal
- RGBA rgba(183, 110, 121, 1): adds alpha for tinted overlays and gradient stops
- HSL hsl(351, 34%, 58%): separates hue from saturation and lightness
- HSB 351, 40, 72: the picker model in most design tools
- CMYK 0, 40, 34, 28: magenta and yellow over a substantial black plate
CMYK is where rose gold behaves better than expected. The 28% key coverage means the color is built partly from black rather than from saturated ink alone, so it reproduces closely in print where a bright pink would shift.
HSL is what makes the shade ladder predictable. Holding hue at 351° and saturation at 34% while stepping lightness generates the whole family, including the AA-compliant #89525B and the AAA-compliant #763A43.
The metallic version needs a gradient, not a conversion. No single value in any format captures rose gold as a material, so specify a stop list rather than a hex whenever the design calls for actual metal.
Wrapping Up
Rose gold is the rare accent color that carries its own type. Use #B76E79 for headings, buttons with large labels, borders, and brand surfaces, drop to #89525B when body copy or a small white label is involved, reach for #763A43 when you need AAA, and build a gradient from #E3C6CB through #72454C when the design has to read as metal rather than paint.
Stop deriving those steps by hand. Open Visily and use its AI-powered design tools to generate the rose gold tint and shade ladder, accessible button and heading states, and matched accent pairings across the whole design in one pass.
