Caramel Macchiato
#c58d4b
Toasty medium caramel, less peachy than Bourbon Peach
About Caramel Macchiato
Caramel Macchiato sits right between Caramel Crumb's amber-forward richness and Cognac's leather-brown weight, but it's the one that actually feels like coffee, less pure caramel, more roasted depth. It's got enough saturation to hold a layout without the pull-toward-orange that makes Caramelise read as intentionally burnt. The difference is subtle until you put them side by side; then you see this one's quieter, less showy.
Use it in coffee shop interfaces, beverage product cards, and hospitality platforms where you need warmth that doesn't scream. It works as a button background or card container in food delivery apps, retail checkout flows, and editorial layouts around food photography. There's presence here, but it's the kind that whispers instead of announces, it recedes just enough to let your content matter more than the frame.
Pair it with deep charcoal or warm grays and it opens up clean. Against cream or pale backgrounds you'll lose contrast, so test your actual copy and imagery first before committing it to a large surface.
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.
Similar colors
Create a gradient with Caramel Macchiato
Open the generator with this color pre-loaded.
Start creating