Pikka Logo Pikka
Chrome App
Rich Confectionery Warm Amber Brown Category: Brown

Caramel (#AF6E4D) — Color Codes, Meaning & UI Palettes

Caramel (#AF6E4D) takes its name from caramelized sugar, presenting a luscious, medium-warm golden brown. It expresses artisanal heritage, comforting indulgence, tactile leathercraft, and autumn warmth.

Quick Answer (Caramel Color Code): The exact HEX code for Caramel is #AF6E4D. In RGB, it is rgb(175, 110, 77). In HSL, it is hsl(20deg, 39%, 49%), and its print CMYK formulation is cmyk(0%, 37%, 56%, 31%). It has a relative luminance of 0.208 and pairs best in UI design with Clotted Cream (#FFFDF5) and Deep Espresso (#2C1810).
Click to Copy HEX
Caramel
#AF6E4D
HEX
#AF6E4D
RGB
rgb(175, 110, 77)
HSL
hsl(20deg, 39%, 49%)
CMYK (Print)
cmyk(0%, 37%, 56%, 31%)
Apple Display P3
color(display-p3 0.686 0.431 0.302)

WCAG 2.1 Accessibility & Contrast Rating

White Text (#FFFFFF) 4.07:1 (AA Large)
Black Text (#000000) 5.16:1 (AA)

11-Step Tints & Shades Scale (Tailwind 50–950)

Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:

50
#F9F3F1
100
#F3E8E3
200
#E6D1C6
300
#D7B4A3
400
#C49278
500
#AF6E4D
600
#8E593E
700
#714732
800
#533425
900
#382318
950
#1F140E

Color Harmonies & Palette Schemes

Complementary

#4C8DAE
Opposite 180° Contrast

Analogous -30°

#AE4C5C
Natural Harmony

Analogous +30°

#AE9D4C
Natural Harmony

Triadic +120°

#4CAE6D
120° Balanced Triad

Triadic +240°

#6D4CAE
120° Balanced Triad

Curated UI Design Pairings for Caramel

Stunning card accent, button border, and lifestyle heading tone for specialty coffee roasters, leather goods, bakery eCommerce, and cozy hospitality.

Clotted Cream
#FFFDF5
Soft Accessible Background
Deep Espresso
#2C1810
Rich High-Contrast Typography
Sage Leaf
#84A98C
Botanical Earth Complement
Burnished Copper
#B87333
Warm Metallic Shadow

Export Caramel Code Snippets

CSS Variable --color-caramel-color: #AF6E4D;
Tailwind Config 'caramel-color': '#AF6E4D'
Swift / SwiftUI Color(hex: "#AF6E4D")
JSON Design Token {"name": "Caramel", "hex": "#AF6E4D"}

Frequently Asked Questions About Caramel (#AF6E4D)

What is the exact HEX code for Caramel?

The exact HEX code for Caramel is #AF6E4D. In 8-digit hexadecimal (with 100% opacity), it is #AF6E4DFF. Its RGB decimal equivalent is rgb(175, 110, 77) and its HSL value is hsl(20deg, 39%, 49%).

What colors go best with Caramel in UI and web design?

Caramel pairs exceptionally well with Clotted Cream (#FFFDF5), Deep Espresso (#2C1810), Sage Leaf (#84A98C), and Burnished Copper (#B87333).

How do I use Caramel in CSS and Tailwind CSS?

In standard CSS, apply it directly via color: #AF6E4D; or background-color: #AF6E4D;. In Tailwind CSS, use arbitrary value syntax like bg-[#af6e4d] or text-[#af6e4d], or define it in your Tailwind v4 @theme block as --color-caramel-color: #AF6E4D;.

Is Caramel WCAG accessible for readable text?

Against a pure white background (#FFFFFF), Caramel achieves a contrast ratio of 4.07:1 (AA Large). Against a pure black background (#000000), it achieves 5.16:1 (AA). Check custom contrast pairings on Pikka's WCAG Contrast Checker.

Explore More Colors in the Dictionary

Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.

Named Color Dictionary Interactive Color Wheel Tint & Shade Generator