Fawn
#cfaf7b
Dusty beige-green for muted, earthy balance in UI
About Fawn
Fawn reads like the inside of a well-worn kraft envelope: light, softly browned, and a little more grounded than a clean gold. It's less yellow-forward than Gold Digger and more tan than Croissant, so it doesn't disappear into the background the way that paler pastry tone can. Compared with Goldfrapp, Fawn feels a touch drier and less "sunlit paper" and more like a muted, warm neutral that's already been lived with.
I use it when the layout needs light, earthy emphasis without swinging into olive or going too close to caramel. It works in data-heavy editorial dashboards where you want muted section headers, filters, and tag pills to read distinct but not shout. It also shows up well in e-commerce product panels and logistics or media archive UIs, especially for secondary CTAs and price blocks that must stay legible over off-whites.
Pair Fawn with deeper olive rules or charcoal text, and watch the saturation in very bright rooms. Next to cool grays it can lean slightly more beige, so test before you commit.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.