Caramel

#af6f09

Deeper caramel amber for stronger warmth accents

Save
Share

About Caramel

Caramel sits darker and more saturated than , 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 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.

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
4.12:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.78:1FailAA Large

On Gray 900 #18181b

Aa
4.30:1FailAA Large

On Black #000000

Aa
5.10: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

#aa6d28
#aa7711
#b06500
#a87900

Create a gradient with Caramel

Open the generator with this color pre-loaded.

Start creating