Chinotto to Bear Hug Color Palette

About this palette

Chinotto to Bear Hug is a 5-color muted palette: #584849 (Chinotto), #A18D77 (Gramps Shoehorn), #EFE0D7 (Delicate Bliss), #DCB5BA (Shy Young Salmon), #77625A (Bear Hug). It mixes gray, orange, pink tones and feels warm overall. The strongest text pairing is #584849 on #EFE0D7 with a contrast ratio of 6.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chinotto	rgb(88, 72, 73)	hsl(356, 10%, 31%)
Gramps Shoehorn	rgb(161, 141, 119)	hsl(31, 18%, 55%)
Delicate Bliss	rgb(239, 224, 215)	hsl(22, 43%, 89%)
Shy Young Salmon	rgb(220, 181, 186)	hsl(352, 36%, 79%)
Bear Hug	rgb(119, 98, 90)	hsl(17, 14%, 41%)

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.69:1 Good#584849 on #EFE0D7
Aa6.69:1 Good#EFE0D7 on #584849
Aa4.66:1 Good#584849 on #DCB5BA
Aa4.66:1 Good#DCB5BA on #584849
Aa4.43:1 Poor#EFE0D7 on #77625A
Aa4.43:1 Poor#77625A on #EFE0D7
Aa3.09:1 Poor#DCB5BA on #77625A
Aa3.09:1 Poor#77625A on #DCB5BA

Color blindness preview

CSS variables

/* Chinotto to Bear Hug — https://swatchly.xyz/palette/584849-a18d77-efe0d7-dcb5ba-77625a */
:root {
  --chinotto: #584849;
  --gramps-shoehorn: #a18d77;
  --delicate-bliss: #efe0d7;
  --shy-young-salmon: #dcb5ba;
  --bear-hug: #77625a;
}

Tailwind CSS v4

/* Chinotto to Bear Hug — https://swatchly.xyz/palette/584849-a18d77-efe0d7-dcb5ba-77625a */
@theme {
  --color-chinotto: #584849;
  --color-chinotto-50: #fdf2f3;
  --color-chinotto-100: #f4e8e8;
  --color-chinotto-200: #e0d2d2;
  --color-chinotto-300: #c9b9ba;
  --color-chinotto-400: #a99899;
  --color-chinotto-500: #8d7b7c;
  --color-chinotto-600: #706061;
  --color-chinotto-700: #584849;
  --color-chinotto-800: #443839;
  --color-chinotto-900: #352b2b;
  --color-chinotto-950: #21191a;
  --color-gramps-shoehorn: #a18d77;
  --color-gramps-shoehorn-50: #fff5eb;
  --color-gramps-shoehorn-100: #faeddf;
  --color-gramps-shoehorn-200: #eadaca;
  --color-gramps-shoehorn-300: #d7c5b2;
  --color-gramps-shoehorn-400: #baa792;
  --color-gramps-shoehorn-500: #a18d77;
  --color-gramps-shoehorn-600: #84715b;
  --color-gramps-shoehorn-700: #6a5845;
  --color-gramps-shoehorn-800: #534433;
  --color-gramps-shoehorn-900: #403325;
  --color-gramps-shoehorn-950: #281f14;
  --color-delicate-bliss: #efe0d7;
  --color-delicate-bliss-50: #f6ede7;
  --color-delicate-bliss-100: #efe0d7;
  --color-delicate-bliss-200: #dacec8;
  --color-delicate-bliss-300: #c6b9b1;
  --color-delicate-bliss-400: #a89b93;
  --color-delicate-bliss-500: #8e8179;
  --color-delicate-bliss-600: #746860;
  --color-delicate-bliss-700: #5e534c;
  --color-delicate-bliss-800: #4a403a;
  --color-delicate-bliss-900: #39312c;
  --color-delicate-bliss-950: #241e1a;
  --color-shy-young-salmon: #dcb5ba;
  --color-shy-young-salmon-50: #fff1f3;
  --color-shy-young-salmon-100: #fde4e7;
  --color-shy-young-salmon-200: #eccfd2;
  --color-shy-young-salmon-300: #dcb5ba;
  --color-shy-young-salmon-400: #bb969b;
  --color-shy-young-salmon-500: #9f7b80;
  --color-shy-young-salmon-600: #836166;
  --color-shy-young-salmon-700: #6a4c50;
  --color-shy-young-salmon-800: #553a3e;
  --color-shy-young-salmon-900: #422c2f;
  --color-shy-young-salmon-950: #2a1a1c;
  --color-bear-hug: #77625a;
  --color-bear-hug-50: #fff2ed;
  --color-bear-hug-100: #f6e7e1;
  --color-bear-hug-200: #e4d1ca;
  --color-bear-hug-300: #ceb9b2;
  --color-bear-hug-400: #af9990;
  --color-bear-hug-500: #937d74;
  --color-bear-hug-600: #77625a;
  --color-bear-hug-700: #5f4d46;
  --color-bear-hug-800: #4b3c35;
  --color-bear-hug-900: #3b2d28;
  --color-bear-hug-950: #251c18;
}