Gentle Caress to Ebi Brown Color Palette

About this palette

Gentle Caress to Ebi Brown is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #FFD2B1 (Gentle Caress), #DDA98C (Lunatic Lynx), #BB8169 (Earthworm), #995B48 (Coconut), #783628 (Ebi Brown). It mixes orange, red, brown tones and feels warm overall. The strongest text pairing is #FFD2B1 on #783628 with a contrast ratio of 6.41:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gentle Caress	rgb(255, 210, 177)	hsl(25, 100%, 85%)
Lunatic Lynx	rgb(221, 169, 140)	hsl(21, 54%, 71%)
Earthworm	rgb(187, 129, 105)	hsl(18, 38%, 57%)
Coconut	rgb(153, 91, 72)	hsl(14, 36%, 44%)
Ebi Brown	rgb(120, 54, 40)	hsl(10, 50%, 31%)

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.

Aa6.41:1 Good#FFD2B1 on #783628
Aa6.41:1 Good#783628 on #FFD2B1
Aa4.30:1 Poor#DDA98C on #783628
Aa4.30:1 Poor#783628 on #DDA98C
Aa3.83:1 Poor#FFD2B1 on #995B48
Aa3.83:1 Poor#995B48 on #FFD2B1

Color blindness preview

CSS variables

/* Gentle Caress to Ebi Brown — https://swatchly.xyz/palette/ffd2b1-dda98c-bb8169-995b48-783628 */
:root {
  --gentle-caress: #ffd2b1;
  --lunatic-lynx: #dda98c;
  --earthworm: #bb8169;
  --coconut: #995b48;
  --ebi-brown: #783628;
}

Tailwind CSS v4

/* Gentle Caress to Ebi Brown — https://swatchly.xyz/palette/ffd2b1-dda98c-bb8169-995b48-783628 */
@theme {
  --color-gentle-caress: #ffd2b1;
  --color-gentle-caress-50: #fff6f0;
  --color-gentle-caress-100: #ffebdc;
  --color-gentle-caress-200: #ffd2b1;
  --color-gentle-caress-300: #e1bca1;
  --color-gentle-caress-400: #c49b7d;
  --color-gentle-caress-500: #a77f60;
  --color-gentle-caress-600: #8a6446;
  --color-gentle-caress-700: #704d32;
  --color-gentle-caress-800: #593b23;
  --color-gentle-caress-900: #462c18;
  --color-gentle-caress-950: #2d1a0c;
  --color-lunatic-lynx: #dda98c;
  --color-lunatic-lynx-50: #ffebe0;
  --color-lunatic-lynx-100: #ffdbc8;
  --color-lunatic-lynx-200: #eec4ad;
  --color-lunatic-lynx-300: #dda98c;
  --color-lunatic-lynx-400: #bd8c71;
  --color-lunatic-lynx-500: #a37357;
  --color-lunatic-lynx-600: #885b41;
  --color-lunatic-lynx-700: #70472f;
  --color-lunatic-lynx-800: #5b3722;
  --color-lunatic-lynx-900: #492a18;
  --color-lunatic-lynx-950: #2f190c;
  --color-earthworm: #bb8169;
  --color-earthworm-50: #fff5f0;
  --color-earthworm-100: #ffeae2;
  --color-earthworm-200: #ffd2c0;
  --color-earthworm-300: #eebca7;
  --color-earthworm-400: #d49c85;
  --color-earthworm-500: #bb8169;
  --color-earthworm-600: #9c654e;
  --color-earthworm-700: #804d38;
  --color-earthworm-800: #663a27;
  --color-earthworm-900: #502b1b;
  --color-earthworm-950: #33190d;
  --color-coconut: #995b48;
  --color-coconut-50: #fff2ee;
  --color-coconut-100: #ffe5dd;
  --color-coconut-200: #ffcaba;
  --color-coconut-300: #edb2a0;
  --color-coconut-400: #d1917d;
  --color-coconut-500: #b57561;
  --color-coconut-600: #995b48;
  --color-coconut-700: #7d4635;
  --color-coconut-800: #653425;
  --color-coconut-900: #4f271a;
  --color-coconut-950: #34160d;
  --color-ebi-brown: #783628;
  --color-ebi-brown-50: #fff2ef;
  --color-ebi-brown-100: #ffe4de;
  --color-ebi-brown-200: #ffc6b9;
  --color-ebi-brown-300: #eeaa9b;
  --color-ebi-brown-400: #d08777;
  --color-ebi-brown-500: #b26a5a;
  --color-ebi-brown-600: #924f40;
  --color-ebi-brown-700: #783628;
  --color-ebi-brown-800: #5d2a20;
  --color-ebi-brown-900: #4a1f16;
  --color-ebi-brown-950: #2f110b;
}