Caramel is a medium-dark, vivid shade in the brown color family, with a warm feel. Its HEX code is #AF6F09, which equals rgb(175, 111, 9) in RGB and hsl(37, 90%, 36%) in HSL. In print terms it converts to roughly C0 M37 Y95 K31, although exact CMYK results depend on the paper and color profile.
- HEX
#AF6F09 - RGB
175, 111, 9 - HSL
37°, 90%, 36% - CMYK
0, 37, 95, 31 - Family
Brown - Tone
Medium-dark, vivid
About Caramel
Brown shades are earthy, warm and dependable. This family covers tans, beiges, woods and chocolates, and works well for natural, rustic and heritage-style designs. Try it as a primary brand color, a section background, or a highlight against neutral layouts. Text in black is the most readable choice on this color, with a contrast ratio of 5.10:1. Its complementary color is #0949AE.
Download Caramel as an image
Choose a size and format, then download a solid-color image — or tick colors in the library to batch-download a ZIP.
Loading colors…
Loading gradients…
Caramel color codes
| HEX | #AF6F09 |
|---|---|
| RGB | rgb(175, 111, 9) |
| HSL | hsl(37, 90%, 36%) |
| HSV | 37°, 95%, 69% |
| CMYK | 0%, 37%, 95%, 31% |
| Decimal | 11497225 |
Shades and tints of Caramel
Lighter tints are mixed with white and darker shades are mixed with black.
- 50
#F2E7D6 - 100
#E4CFAD - 200
#D7B784 - 300
#CA9F5B - 400
#BC8732 - 500
#AF6F09 - 600
#925D08 - 700
#754A06 - 800
#583805 - 900
#3A2503 - 950
#1D1302
Color harmonies for Caramel
- Complementary
#0949AE≈ Cobalt Blue - Analogous −30°
#AE1C09≈ Deep Vermilion - Analogous +30°
#9BAE09≈ Deep Citron - Triadic +120°
#09AE6F≈ Deep Seafoam - Triadic +240°
#6F09AE≈ Deep Amethyst - Split 150°
#099BAE≈ Deep Lagoon - Split 210°
#1C09AE≈ Deep Indigo
Contrast and accessibility of Caramel
| Text color | Sample | Contrast ratio | WCAG |
|---|---|---|---|
| White text on Caramel | Aa | 4.12:1 | AA Large only |
| Black text on Caramel | Aa | 5.10:1 | AA (good) |
CSS code for Caramel
background-color: #AF6F09;color: #AF6F09;background-color: rgb(175, 111, 9);background-color: hsl(37, 90%, 36%);:root { --color-caramel: #AF6F09; }class="bg-[#AF6F09]"Colors similar to Caramel
- Deep Tangerine
#AD6800 - Deep Amber
#AD7900 - Deep Bright Amber
#9C7211 - Medium Dark Bright Orange
#C16B15 - Deep Bright Tangerine
#9C6511 - Medium Dark Bright Tangerine
#C17C15 - Deep Bright Marigold
#9C8011 - Dark Goldenrod
#B8860B - Deep Orange
#AD5700 - Medium Dark Soft Orange
#AB6B2B - Medium Dark Bright Persimmon
#C15A15 - Medium Dark Soft Tangerine
#AB782B
More brown shades
- Sienna
#A0522D - Taupe
#483C32 - Rust
#B7410E - Ecru
#C2B280 - Mahogany
#C04000 - Camel
#C19A6B - Coffee
#6F4E37 - Espresso
#3C2415 - Umber
#635147 - Sepia
#704214 - Pearl
#EAE0C8
Frequently asked questions
What is the HEX code for Caramel?
The HEX code for Caramel is #AF6F09.
What is the RGB value of Caramel?
Caramel has an RGB value of 175, 111, 9 (rgb(175, 111, 9)). In HSL it is 37°, 90%, 36%.
What text color should I use on Caramel?
Use black text on Caramel. White text has a contrast ratio of 4.12:1 and black text has 5.10:1; WCAG AA requires at least 4.5:1 for normal text.
What color goes well with Caramel?
The complementary color of Caramel is #0949AE. Analogous colors #AE1C09 and #9BAE09 also pair well.