Caramel #af6f09

Sugar, past the point of no return.

RGB

175, 111, 9

HSL

37°, 90%, 36%

CMYK

0, 37, 95, 31

Luminance

0.2050

About Caramel

Caramel, #af6f09, is what sugar becomes at 170°C — chemistry’s most delicious color change. Between honey and coffee, it is the warm brown that always reads edible.

History

Caramelization named the color as confectionery industrialized; caramel leather then became fashion’s favorite tan-plus, and “caramel” entered foundation shades as beauty finally widened its palettes.

Psychology

Caramel is comfort with confidence — sweeter than tan, richer than honey. It reads artisanal, buttery and inclusive: the warm neutral of food and skin alike.

In design

Caramel is a strong warm accent and material tone: leather goods, coffee brands, autumn fashion. It passes large-text on white (~4.6:1) and darkens toward espresso for body ink. Pair with cream, chocolate, denim and forest.

In culture

Salted caramel’s decade of menu domination, caramel skin in a thousand lyrics, the candy apple’s glaze: the color is appetite made visible.

Brands that own caramel

Werther’s#c68a3b Starbucks caramel#af6f09 Coach leather#a5673f Fenty 300-range kin#b07b4f Salted caramel wave#c98d40

Shades of caramel

Honey Butterscotch Toffee Tan Cognac Coffee Amber Chocolate

Every format

HEX	#af6f09
RGB	rgb(175, 111, 9)
HSL	hsl(37, 90%, 36%)
CMYK	cmyk(0%, 37%, 95%, 31%)
LAB	lab(52.4 18.6 57.6)
LCH	lch(52.4 60.6 72.1)
OKLCH	oklch(0.597 0.127 69.4)

Copy-ready code

/* CSS */
color: #af6f09;
background-color: #af6f09;
/* Tailwind (arbitrary) */
class="text-[#af6f09] bg-[#af6f09]"
/* SCSS */
$brand: #af6f09;
/* SwiftUI */
Color(red: 0.686, green: 0.435, blue: 0.035)
/* Android */
Color.parseColor("#af6f09")

Accessibility — WCAG contrast

#af6f09 on white: 4.12:1

AA ✗ fail · AA-large ✓ · AAA ✗

#af6f09 on black: 5.10:1

AA ✓ pass · AA-large ✓ · AAA ✗

true color

protanopia

deuteranopia

tritanopia

RGB percentages

Red68.6%

Green43.5%

Blue3.5%

CMYK percentages

Cyan0.0%

Magenta36.6%

Yellow94.9%

Key (black)31.4%

Color previews

#af6f09 text on a black background

contrast 5.10:1

Card sample

#af6f09 text on a white background

contrast 4.12:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #af6f09;

Background color

Panel with #af6f09 background

background-color: #af6f09;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #af6f09;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(175, 111, 9, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(175, 111, 9, 0.45);

Border & gradient

Gradient panel

border: 3px solid #af6f09;
background: linear-gradient(135deg, #af6f09, #80AF09);

Monochromatic scale

#3A2503 #7E5006 #C27B0A #F4A220 #F7BE64 #FBDBA8 #FDEFD8

Palettes built from #af6f09

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Shades — darker

#9E6408 #8C5907 #7B4E06 #694305 #583805 #462C04 #352103 #231602 #120B01

Tints — lighter

#CE830B #ED970C #F4A526 #F5B245 #F7BE64 #F9CB83 #FAD8A2 #FCE5C1 #FDF2E0

Hue & tone neighbors

#AF3809 #AF5309 #AF8B09 #AFA709 #E08E0C #7F5007 #B87100 #9D6B1B

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

peru · ΔE 13.8 chocolate · ΔE 18.8 sienna · ΔE 25.9 orange · ΔE 31.5 olive · ΔE 31.6

Caramel, answered

What is the hex code for caramel?

Caramel is #af6f09; lighter butterscotch #e3963e and darker toffee #755139 bracket the pan.

Caramel vs honey vs butterscotch?

Honey is golden and translucent, butterscotch adds butter’s paleness, caramel is the deepest — sugar browned furthest.

What pairs with caramel?

Cream and chocolate (the dessert axis), denim (the jacket-and-boots axis), forest and burgundy for autumn depth.

Work with #af6f09 in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →