Hot Fudge to Gentle Caress Color Palette

About this palette

Hot Fudge to Gentle Caress is a 5-color warm, earthy, monochromatic, gradient palette: #5A2800 (Hot Fudge), #904500 (Otterly Brown), #CA6A25 (Solar Ash), #DFA46E (Kombucha), #FFD3B4 (Gentle Caress). It mixes brown, orange tones and feels warm overall. The strongest text pairing is #5A2800 on #FFD3B4 with a contrast ratio of 8.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hot Fudge	rgb(90, 40, 0)	hsl(27, 100%, 18%)
Otterly Brown	rgb(144, 69, 0)	hsl(29, 100%, 28%)
Solar Ash	rgb(202, 106, 37)	hsl(25, 69%, 47%)
Kombucha	rgb(223, 164, 110)	hsl(29, 64%, 65%)
Gentle Caress	rgb(255, 211, 180)	hsl(25, 100%, 85%)

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.

Aa8.76:1 Very good#5A2800 on #FFD3B4
Aa8.76:1 Very good#FFD3B4 on #5A2800
Aa5.56:1 Good#5A2800 on #DFA46E
Aa5.56:1 Good#DFA46E on #5A2800
Aa5.01:1 Good#904500 on #FFD3B4
Aa5.01:1 Good#FFD3B4 on #904500
Aa3.22:1 Poor#5A2800 on #CA6A25
Aa3.22:1 Poor#CA6A25 on #5A2800

Color blindness preview

CSS variables

/* Hot Fudge to Gentle Caress — https://swatchly.xyz/palette/5a2800-904500-ca6a25-dfa46e-ffd3b4 */
:root {
  --hot-fudge: #5a2800;
  --otterly-brown: #904500;
  --solar-ash: #ca6a25;
  --kombucha: #dfa46e;
  --gentle-caress: #ffd3b4;
}

Tailwind CSS v4

/* Hot Fudge to Gentle Caress — https://swatchly.xyz/palette/5a2800-904500-ca6a25-dfa46e-ffd3b4 */
@theme {
  --color-hot-fudge: #5a2800;
  --color-hot-fudge-50: #fff2eb;
  --color-hot-fudge-100: #ffe5d7;
  --color-hot-fudge-200: #fbccb1;
  --color-hot-fudge-300: #e9b495;
  --color-hot-fudge-400: #cd9472;
  --color-hot-fudge-500: #b27956;
  --color-hot-fudge-600: #96603d;
  --color-hot-fudge-700: #7d4b2b;
  --color-hot-fudge-800: #663a1d;
  --color-hot-fudge-900: #5a2800;
  --color-hot-fudge-950: #371b08;
  --color-otterly-brown: #904500;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe5d6;
  --color-otterly-brown-200: #ffcdaf;
  --color-otterly-brown-300: #f9b185;
  --color-otterly-brown-400: #de905e;
  --color-otterly-brown-500: #c4753f;
  --color-otterly-brown-600: #a85b24;
  --color-otterly-brown-700: #904500;
  --color-otterly-brown-800: #723500;
  --color-otterly-brown-900: #592800;
  --color-otterly-brown-950: #3a1800;
  --color-solar-ash: #ca6a25;
  --color-solar-ash-50: #fff3ec;
  --color-solar-ash-100: #ffe6d8;
  --color-solar-ash-200: #ffccae;
  --color-solar-ash-300: #ffac79;
  --color-solar-ash-400: #e6874a;
  --color-solar-ash-500: #ca6a25;
  --color-solar-ash-600: #a95000;
  --color-solar-ash-700: #873f00;
  --color-solar-ash-800: #6b3000;
  --color-solar-ash-900: #532400;
  --color-solar-ash-950: #361500;
  --color-kombucha: #dfa46e;
  --color-kombucha-50: #ffe9d6;
  --color-kombucha-100: #ffd9b7;
  --color-kombucha-200: #f1c095;
  --color-kombucha-300: #dfa46e;
  --color-kombucha-400: #c08853;
  --color-kombucha-500: #a66f39;
  --color-kombucha-600: #8b5722;
  --color-kombucha-700: #734410;
  --color-kombucha-800: #5e3504;
  --color-kombucha-900: #4c2900;
  --color-kombucha-950: #311800;
  --color-gentle-caress: #ffd3b4;
  --color-gentle-caress-50: #fff7f2;
  --color-gentle-caress-100: #ffecde;
  --color-gentle-caress-200: #ffd3b4;
  --color-gentle-caress-300: #e1bda4;
  --color-gentle-caress-400: #c39c80;
  --color-gentle-caress-500: #a77f62;
  --color-gentle-caress-600: #8a6448;
  --color-gentle-caress-700: #704d34;
  --color-gentle-caress-800: #583b25;
  --color-gentle-caress-900: #452c1a;
  --color-gentle-caress-950: #2c1b0d;
}