Caramel Coating

#bb7711

Toasty caramel brown-gold for soft, grounded accents

Save
Share

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 does. It's warmer and lighter than , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
3.65:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.34:1FailAA Large

On Gray 900 #18181b

Aa
4.86:1AAAAA Large

On Black #000000

Aa
5.76:1AAAAA Large

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Caramel Coating

Open the generator with this color pre-loaded.

Start creating