#C68642
Brown family

Caramel

Also known as: rich · earthy · inviting · sweet · toasty
Save
Hex #C68642
RGB rgb(198, 134, 66)
HSL hsl(31°, 54%, 52%)
CMYK 0 · 32 · 67 · 22

Meaning

In Western cultures, caramel symbolizes comfort, warmth, and indulgence, often associated with sweet treats and nostalgic memories. Conversely, in some Eastern traditions, it can signify wealth and prosperity, exemplifying the duality of luxury and homeliness.

The term 'caramel' originated from the Spanish word 'caramelo' in the 17th century, which itself comes from the Late Latin 'cannamellis', meaning 'sugarcane honey'. Historically, caramel was used in cooking and candy-making, with recipes appearing in cookbooks as early as the 18th century.

richearthyinvitingsweettoasty

Similar colors

Ranked by CIE76 ΔE — the perceptual distance from Caramel. Lower ΔE means a closer match (below ~2 is barely distinguishable).

All 35 Browns →

Shades & tints

Nine steps of Caramel by lightness — from #674622 (darkest) to #E1C09D (lightest). Click any to copy.

-40% #674622
-30% #7F562A
-20% #966632
-10% #AE763A
BASE #C68642
+15% #CD9559
+30% #D4A36F
+50% #DBB286
+70% #E1C09D

Complementary

Sitting opposite Caramel at 211° on the color wheel, these give the highest-contrast pairings.

Palettes

Curated 5-color combinations featuring Caramel.

#C68642
#8B4513
#F5F5DC
#FFD700
#A0522D

Autumn Harvest

Warm Comfort
#C68642
#FFF5E1
#5B3A29
#D2691E
#F0E68C

Cozy Kitchen

Inviting Space
#C68642
#FFB6C1
#BDB76B
#8FBC8F
#DDA0DD

Sweet Treats

Delightful Indulgence

Used by

Brands and institutions known for using Caramel.

DoveHäagen-Dazs

Caramel scale

A 50–900 tonal scale with Caramel anchored at 500 — ready to drop into a design system. Click any step to copy.

50 #FAF5F0
100 #F5E9DD
200 #E9D1B7
300 #DEB991
400 #D29F6A
500 #C68642
600 #A26E36
700 #83582C
800 #634321
900 #432E16

Accessibility

Works well as text on dark backgrounds; fails on light.

Aa Best text color: #000000 · 6.89:1
Caramel as text on… Ratio AA AAA
Aa White background 3.05:1 Large only Fail
Aa Black background 6.89:1 Pass Large only

Thresholds: AA needs 4.5:1 (normal text) / 3:1 (large); AAA needs 7:1 / 4.5:1. Large = 18pt+ or 14pt+ bold.

How to use #C68642

Copy-ready values for CSS, screen and print, plus the extra conversions designers reach for.

CSS color: #C68642;
CSS color-mix (lighten 30%) color-mix(in srgb, #C68642 70%, white)
HSV / HSB 31°, 67%, 78%
CMYK (print) 0, 32, 67, 22
Decimal 13010498
Nearest web-safe #CC9933

Color vision

How Caramel appears to viewers with the three main types of color blindness (~1 in 12 men, 1 in 200 women). Simulated approximations.

Normal vision

#C68642

Protanopia (no red)

#AAAA52

Deuteranopia (no green)

#AEB356

Tritanopia (no blue)

#C35F62
Fawn
21 / 35 Browns Toffee
Copied!