Named color

Caramel

Caramel is an earth tone orange color with HEX #AF6E4D. According to Colors Encyclopedia, it has RGB 175, 110, 77, HSL 20, 39%, 49%, warm temperature, and is useful for warm accents, food branding, and interior palettes.

#AF6E4D orange warm earth-tone

HEX #AF6E4D

RGB rgb(175, 110, 77)

HSL hsl(20 39% 49%)

CMYK cmyk(0, 37, 56, 31)

Luminance 0.208

Contrast Black 5.16:1White 4.07:1

CSS Utilities

--color-caramel: #AF6E4D;
.bg-caramel { background-color: #AF6E4D; }
.text-caramel { color: #AF6E4D; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.208

Black text5.16:1AA Pass

White text4.07:1AA Fail

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#AF6E4D",
  "rgb": [
    175,
    110,
    77
  ],
  "hsl": [
    20,
    39,
    49
  ],
  "cmyk": [
    0,
    37,
    56,
    31
  ],
  "luminance": 0.208,
  "contrast": {
    "black": 5.16,
    "white": 4.07
  }
}

WCAG

{
  "AA": [
    "#000000"
  ],
  "AAA": []
}

Harmonies

{
  "complementary": "#4C8DAE",
  "analogous": [
    "#AE4C5C",
    "#AE9D4C"
  ],
  "triadic": [
    "#4CAE6D",
    "#6D4CAE"
  ],
  "tetradic": [
    "#5CAE4C",
    "#4C8DAE",
    "#9D4CAE"
  ],
  "splitComplementary": [
    "#4CAE9D",
    "#4C5CAE"
  ],
  "monochromatic": [
    "#CCA08A",
    "#AF6E4D",
    "#6E4530"
  ]
}

Variants

{
  "light": "#CCA08A",
  "dark": "#6E4530",
  "saturated": "#C96431",
  "desaturated": "#927668",
  "pastel": "#CDB7AD",
  "neon": "#FF6D24"
}

Pairings

{
  "best": [
    "#000000",
    "#4C8DAE",
    "#AE4C5C",
    "#AE9D4C"
  ],
  "avoid": [
    "#927668",
    "#CCA08A"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#CCA08A",
    "#927668"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "clay",
    "desert-clay",
    "oak",
    "adobe",
    "red-clay"
  ],
  "generatedPalettes": [
    "caramel"
  ],
  "generatedComparisons": [
    "caramel-vs-clay",
    "caramel-vs-desert-clay",
    "oak-vs-caramel"
  ],
  "relatedFamilies": [
    "/colors/by-family/orange",
    "/colors/by-temperature/warm",
    "/colors/by-tone/earth-tone"
  ],
  "relatedTools": [
    "/harmonies/caramel",
    "/wcag/caramel",
    "/css/colors/caramel",
    "/hex/af6e4d"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/orange",
      "/colors/by-temperature/warm",
      "/colors/by-tone/earth-tone"
    ],
    "narrower": [
      "/palettes/caramel"
    ],
    "related": [
      "/colors/clay",
      "/colors/desert-clay",
      "/colors/oak",
      "/colors/adobe",
      "/colors/red-clay",
      "/compare/caramel-vs-clay",
      "/compare/caramel-vs-desert-clay",
      "/compare/oak-vs-caramel",
      "/harmonies/caramel",
      "/wcag/caramel",
      "/css/colors/caramel",
      "/hex/af6e4d"
    ]
  }
}

Full JSON dataset

{
  "slug": "caramel",
  "name": "Caramel",
  "hex": "#AF6E4D",
  "uses": [
    "warm accents",
    "food branding",
    "interior palettes"
  ],
  "psychology": {
    "associations": [
      "warmth",
      "comfort",
      "approachability"
    ],
    "contexts": [
      "hospitality",
      "craft",
      "food",
      "home decor"
    ],
    "avoidIn": [
      "cold technical interfaces"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design and editorial color systems."
  },
  "family": "orange",
  "temperature": "warm",
  "tone": [
    "earth-tone"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "orange",
    "warm",
    "earth-tone",
    "warm-accents",
    "food-branding",
    "interior-palettes",
    "warmth",
    "comfort",
    "approachability"
  ],
  "popularity": 84,
  "rgb": [
    175,
    110,
    77
  ],
  "hsl": [
    20,
    39,
    49
  ],
  "cmyk": [
    0,
    37,
    56,
    31
  ],
  "luminance": 0.208,
  "contrast": {
    "black": 5.16,
    "white": 4.07
  },
  "harmonies": {
    "complementary": "#4C8DAE",
    "analogous": [
      "#AE4C5C",
      "#AE9D4C"
    ],
    "triadic": [
      "#4CAE6D",
      "#6D4CAE"
    ],
    "tetradic": [
      "#5CAE4C",
      "#4C8DAE",
      "#9D4CAE"
    ],
    "splitComplementary": [
      "#4CAE9D",
      "#4C5CAE"
    ],
    "monochromatic": [
      "#CCA08A",
      "#AF6E4D",
      "#6E4530"
    ]
  },
  "variants": {
    "light": "#CCA08A",
    "dark": "#6E4530",
    "saturated": "#C96431",
    "desaturated": "#927668",
    "pastel": "#CDB7AD",
    "neon": "#FF6D24"
  },
  "wcag": {
    "AA": [
      "#000000"
    ],
    "AAA": []
  },
  "css": {
    "variable": "--color-caramel: #AF6E4D;",
    "utility": ".bg-caramel { background-color: #AF6E4D; }",
    "textUtility": ".text-caramel { color: #AF6E4D; }"
  },
  "nearestColors": [
    "clay",
    "desert-clay",
    "oak",
    "adobe",
    "red-clay"
  ],
  "generatedPalettes": [
    "caramel"
  ],
  "generatedComparisons": [
    "caramel-vs-clay",
    "caramel-vs-desert-clay",
    "oak-vs-caramel"
  ],
  "relatedFamilies": [
    "/colors/by-family/orange",
    "/colors/by-temperature/warm",
    "/colors/by-tone/earth-tone"
  ],
  "relatedTools": [
    "/harmonies/caramel",
    "/wcag/caramel",
    "/css/colors/caramel",
    "/hex/af6e4d"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/orange",
      "/colors/by-temperature/warm",
      "/colors/by-tone/earth-tone"
    ],
    "narrower": [
      "/palettes/caramel"
    ],
    "related": [
      "/colors/clay",
      "/colors/desert-clay",
      "/colors/oak",
      "/colors/adobe",
      "/colors/red-clay",
      "/compare/caramel-vs-clay",
      "/compare/caramel-vs-desert-clay",
      "/compare/oak-vs-caramel",
      "/harmonies/caramel",
      "/wcag/caramel",
      "/css/colors/caramel",
      "/hex/af6e4d"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#4C8DAE",
      "#AE4C5C",
      "#AE9D4C"
    ],
    "avoid": [
      "#927668",
      "#CCA08A"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#CCA08A",
      "#927668"
    ]
  }
}

Color meaning and use

About Caramel Color

Caramel sits in the orange family with warm temperature and earth tone visual character. Caramel is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include warmth, comfort, and approachability, which makes it relevant for hospitality and craft. In design work, Caramel is most useful for warm accents, food branding, and interior palettes, especially when paired with black text for stronger contrast.

WCAG Accessibility

Contrast checks for Caramel against black and white text.

Black text5.16:1AA Pass

White text4.07:1AA Fail

AA text options#000000

AAA text optionsNone in seed set

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Clay#B66A50

Desert Clay#B86D4B

Oak#A8754F

Adobe#BD6C48

Red Clay#B45A3C

Color Harmonies

#4C8DAE#4C8DAE

#AE4C5C#AE4C5C

#AE9D4C#AE9D4C

#4CAE6D#4CAE6D

#6D4CAE#6D4CAE

Open full Caramel harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#CCA08A#CCA08A

#6E4530#6E4530

#C96431#C96431

#927668#927668

#CDB7AD#CDB7AD

#FF6D24#FF6D24

Pairings

Black#000000

#4C8DAE#4C8DAE

#AE4C5C#AE4C5C

#AE9D4C#AE9D4C

Matte Black#1A1A1A

White Smoke#F5F5F5

Caramel

CSS Utilities

Machine-Readable Color Data (JSON)

About Caramel Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings