Caramel Coating
#bb7711
Toasty caramel brown-gold for soft, grounded accents
About Caramel Coating
Caramel Coating is the bridge that actually works, it's got enough brown in it to feel grounded, but the yellow undertone keeps it from disappearing like Chocolate does. It's warmer and lighter than Arrakis Spice, which means it doesn't command the room the same way. Where Cinnamon leans into rust and heat, this one reads more honestly as what its name promises: the color of caramel right before it tips into bitter.
Use it in e-commerce product cards, food and beverage layouts, and heritage brand sites where you need something that feels approachable but still has backbone. It works as a secondary background, a button hover state, or a container that lets photography breathe without feeling washed out. Against cream or warm white it settles in naturally; against charcoal it sharpens up enough to read intentional instead of muddy.
The trick: it's saturated enough that large areas of it won't feel flat, but test it at scale first. Pair it with off-white or warm gray and it reads softer than you'd expect. Push it against cool neutrals and the yellow starts competing, so know what you're doing there.
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.