Chocolate Rain to Caramel Essence color palette

6C4E13Chocolate Rain A98445Hamster Fur FFF1DAEscargot 3F2B00Secret Passage D8B268Caramel Essence

About this palette

Chocolate Rain to Caramel Essence is a 5-color warm, earthy, vintage, monochromatic palette: #6C4E13 (Chocolate Rain), #A98445 (Hamster Fur), #FFF1DA (Escargot), #3F2B00 (Secret Passage), #D8B268 (Caramel Essence). It mixes brown, yellow, white tones and feels warm overall. The strongest text pairing is #FFF1DA on #3F2B00 with a contrast ratio of 12.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Rain	rgb(108, 78, 19)	hsl(40, 70%, 25%)
Hamster Fur	rgb(169, 132, 69)	hsl(38, 42%, 47%)
Escargot	rgb(255, 241, 218)	hsl(37, 100%, 93%)
Secret Passage	rgb(63, 43, 0)	hsl(41, 100%, 12%)
Caramel Essence	rgb(216, 178, 104)	hsl(40, 59%, 63%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa12.11:1 Super#FFF1DA on #3F2B00
Aa12.11:1 Super#3F2B00 on #FFF1DA
Aa6.89:1 Good#6C4E13 on #FFF1DA
Aa6.89:1 Good#FFF1DA on #6C4E13
Aa6.74:1 Good#3F2B00 on #D8B268
Aa6.74:1 Good#D8B268 on #3F2B00
Aa3.90:1 Poor#A98445 on #3F2B00
Aa3.90:1 Poor#3F2B00 on #A98445

Color blindness preview

CSS variables

/* Chocolate Rain to Caramel Essence — https://swatchly.xyz/palette/6c4e13-a98445-fff1da-3f2b00-d8b268 */
:root {
  --chocolate-rain: #6c4e13;
  --hamster-fur: #a98445;
  --escargot: #fff1da;
  --secret-passage: #3f2b00;
  --caramel-essence: #d8b268;
}

Tailwind CSS v4

/* Chocolate Rain to Caramel Essence — https://swatchly.xyz/palette/6c4e13-a98445-fff1da-3f2b00-d8b268 */
@theme {
  --color-chocolate-rain: #6c4e13;
  --color-chocolate-rain-50: #fff4e1;
  --color-chocolate-rain-100: #fee8c5;
  --color-chocolate-rain-200: #edd3aa;
  --color-chocolate-rain-300: #d9bc8c;
  --color-chocolate-rain-400: #bb9b66;
  --color-chocolate-rain-500: #a08049;
  --color-chocolate-rain-600: #83652f;
  --color-chocolate-rain-700: #6c4e13;
  --color-chocolate-rain-800: #553d0e;
  --color-chocolate-rain-900: #422e05;
  --color-chocolate-rain-950: #2a1c01;
  --color-hamster-fur: #a98445;
  --color-hamster-fur-50: #fff5e4;
  --color-hamster-fur-100: #ffeac9;
  --color-hamster-fur-200: #f2d6a8;
  --color-hamster-fur-300: #e0bf8a;
  --color-hamster-fur-400: #c39f64;
  --color-hamster-fur-500: #a98445;
  --color-hamster-fur-600: #8c6929;
  --color-hamster-fur-700: #725213;
  --color-hamster-fur-800: #5b3e02;
  --color-hamster-fur-900: #462f00;
  --color-hamster-fur-950: #2d1c00;
  --color-escargot: #fff1da;
  --color-escargot-50: #fff1da;
  --color-escargot-100: #f1e8da;
  --color-escargot-200: #dfd5c4;
  --color-escargot-300: #cabeab;
  --color-escargot-400: #ac9f8a;
  --color-escargot-500: #91846f;
  --color-escargot-600: #766a56;
  --color-escargot-700: #5e5442;
  --color-escargot-800: #4a4131;
  --color-escargot-900: #3a3224;
  --color-escargot-950: #241e15;
  --color-secret-passage: #3f2b00;
  --color-secret-passage-50: #fff4e0;
  --color-secret-passage-100: #f9e9cf;
  --color-secret-passage-200: #e7d5b5;
  --color-secret-passage-300: #d3be9a;
  --color-secret-passage-400: #b49d76;
  --color-secret-passage-500: #988159;
  --color-secret-passage-600: #7c663f;
  --color-secret-passage-700: #634f2c;
  --color-secret-passage-800: #4d3c1d;
  --color-secret-passage-900: #3f2b00;
  --color-secret-passage-950: #241b08;
  --color-caramel-essence: #d8b268;
  --color-caramel-essence-50: #ffeed0;
  --color-caramel-essence-100: #fbe2b2;
  --color-caramel-essence-200: #eacc93;
  --color-caramel-essence-300: #d8b268;
  --color-caramel-essence-400: #b8944d;
  --color-caramel-essence-500: #9e7a2e;
  --color-caramel-essence-600: #846110;
  --color-caramel-essence-700: #6b4d00;
  --color-caramel-essence-800: #553c00;
  --color-caramel-essence-900: #432f00;
  --color-caramel-essence-950: #2b1d00;
}