Sweet Potato
#d87c3b
Soft orange-yellow with sweet earthy depth
About Sweet Potato
Sweet Potato reads like a ripe baked sweet potato pulled out of the oven, not a citrus peel. It's in the yellow family, but the undertone stays distinctly orange-brown with a mellow, cozy glow. Compared to Holy Cannoli, it's less glossy and less "tray-fresh," with a softer saturation that doesn't feel crisp or cookie-glazed. Compared to Jaffa, it loses some of that red-orange punch and instead settles into a gentler, earth-leaning warmth.
In UI, I use it as the friendly warm accent when yellow-orange needs to feel grounded, not attention-grabby. It shows up well in dashboards and finance apps for step highlights, summary cards, and product availability states where you want warmth without the red edge of Jaffa. It also works for food and beverage packaging mockups that need "spice pantry" energy, and for promo banners over light layouts where too-bright oranges can look jumpy.
If you pair it with Polished Bronze, keep the bronze side restrained so the metal doesn't push it toward a darker amber. Cream and light sand make the bake-like softness read clearly; cool gray backdrops can make it feel a touch heavier than you expect.
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.