Caramel
#af6f09
Deeper caramel amber for stronger warmth accents
About Caramel
Caramel sits darker and more saturated than Butterbeer, with less softness and more spine. It's got actual weight to it, the kind of brown-gold that doesn't whisper. Where Caramel Coating reads as the color of caramel itself, this one leans deeper, closer to roasted grain or toasted nuts. It's committed to warmth without the restraint that makes Brown Alpaca disappear.
Reach for it in food packaging, hospitality design, and editorial work where you need a background that holds authority without shouting. It works as a card container, a button state, a sidebar, anywhere you want color that reads intentional and doesn't fade at scale. Against cream or warm white it settles naturally; against cool grays it sharpens up enough to feel deliberate instead of muddy.
The difference: it's saturated enough that you can use larger areas of it without it falling flat, but it'll dominate if you're not watching your contrast. Pair it with off-white and it reads warm and approachable. Push it against bright accents and it'll hold its ground, this one doesn't need as much breathing room as its lighter neighbors.
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.