Dusty Rose Color Codes: Comparing How Muted Different Swatches Look

Dusty rose describes a subdued rose color with a grayish quality, but different color references assign it different numerical values. One swatch may lean peach, another toward pink-red, and another closer to gray. Rather than treating any one HEX code as the universal definition, this article compares three published swatches, their HSL values, and their use as text or background colors on websites.

Compare three dusty rose codes by hue and saturation

PicMonkey lists ■#DCAE96, Figma uses ■#DCA1A1, and HTML Color Codes gives ■#C9A9A6 for a color named “Dusty Rose.” These are three source-specific examples, not competing official standards. HEX is a web color notation consisting of a hash sign and six hexadecimal digits. RGB represents the red, green, and blue components of light. HSL describes a color using hue (the direction of the color), saturation (its degree of vividness), and lightness (a mathematically defined brightness component).

The HSL figures shown in the swatches were calculated from the listed HEX values and rounded to whole numbers for comparison. All three have a similar HSL lightness of approximately 72–75%, yet their saturation values are about 50%, 46%, and 24%. The HTML Color Codes swatch ■#C9A9A6 therefore has the lowest HSL saturation of these examples and tends to appear grayer. PicMonkey’s ■#DCAE96 leans warmer and more yellow, while Figma’s ■#DCA1A1 leans toward pink-red. HSL saturation alone does not completely measure perceived “dustiness”: hue, surrounding colors, and display conditions also affect the result.

Use the grayer swatch on product cards and the warmer swatch on a banner

Example A: a product comparison page for fragrance items.Use warm off-white ■#FAF6F2 around product photographs and longer descriptions. Apply the lower-saturation dusty rose ■#C9A9A6 to a short “Scent Notes” heading band and use dark charcoal ■#29242C for the heading and body text. The contrast ratios are approximately 7.02:1 for charcoal on the dusty-rose band and 14.12:1 for charcoal on off-white. Make the “Choose a Scent” button deep plum ■#553743 with white ■#FFFFFF lettering; white on that fill has about 10.43:1 contrast. Using the rose shade on a supporting surface preserves space for comparing the actual product photos.

Example B: a limited-time tea campaign banner.Cover a larger area of the banner with PicMonkey’s warmer dusty rose ■#DCAE96 and place a short “Autumn Tea Set” heading on it in charcoal ■#29242C. This text-background pair has approximately 7.62:1 contrast. Give the primary button a deep-plum ■#553743 fill with white ■#FFFFFF text, and keep supporting details short. If a pinker direction suits the photographs better, replace the main background with Figma’s ■#DCA1A1; charcoal ■#29242C on that version has approximately 6.98:1 contrast. The warmer and pinker swatches contrast with each other by only about 1.09:1, so do not use their color difference alone to distinguish states such as “Regular” and “Limited.”

Check white lettering and the edges of pale panels separately

White ■#FFFFFF on the warmer dusty rose ■#DCAE96 has a contrast ratio of about 1.99:1, on Figma’s pinker swatch ■#DCA1A1 about 2.17:1, and on the grayer swatch ■#C9A9A6 about 2.16:1. All three fall below the WCAG (Web Content Accessibility Guidelines) 2.2 Level AA requirements of 4.5:1 for normal-sized text and 3:1 for large text. Use dark text on these relatively light colors instead of putting white type directly on them.

Also, the grayer dusty rose ■#C9A9A6 and off-white ■#FAF6F2 differ by just 2.01:1. Spacing may be enough for a purely decorative division, but where an edge is necessary to identify an input or another interactive component, add a stronger visual cue such as a deep-plum ■#553743 outline. That outline contrasts with the dusty rose by approximately 4.82:1 and with off-white by about 9.70:1. Visual information needed to identify user-interface components generally requires at least 3:1 contrast against adjacent colors.

HueRoll lets you adjust colors with HEX input and check the selected color’s contrast against white or black. It cannot directly compare arbitrary color pairs or automatically judge WCAG conformance. After choosing among the three swatches, calculate the actual text, button, and border combinations used in the finished layout.