Monkey Island to Candy Cane Color Palette

About this palette

Monkey Island to Candy Cane is a 5-color warm, vintage, monochromatic, gradient palette: #5B3640 (Monkey Island), #8F4D5E (Velour Scar), #9D6F77 (Never Forget), #B78D97 (Rosy Brown), #F7BDC5 (Candy Cane). It mixes red, pink tones and feels warm overall. The strongest text pairing is #5B3640 on #F7BDC5 with a contrast ratio of 6.37:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monkey Island	rgb(91, 54, 64)	hsl(344, 26%, 28%)
Velour Scar	rgb(143, 77, 94)	hsl(345, 30%, 43%)
Never Forget	rgb(157, 111, 119)	hsl(350, 19%, 53%)
Rosy Brown	rgb(183, 141, 151)	hsl(346, 23%, 64%)
Candy Cane	rgb(247, 189, 197)	hsl(352, 78%, 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.

Aa6.37:1 Good#5B3640 on #F7BDC5
Aa6.37:1 Good#F7BDC5 on #5B3640
Aa3.85:1 Poor#8F4D5E on #F7BDC5
Aa3.85:1 Poor#F7BDC5 on #8F4D5E
Aa3.55:1 Poor#5B3640 on #B78D97
Aa3.55:1 Poor#B78D97 on #5B3640

Color blindness preview

CSS variables

/* Monkey Island to Candy Cane — https://swatchly.xyz/palette/5b3640-8f4d5e-9d6f77-b78d97-f7bdc5 */
:root {
  --monkey-island: #5b3640;
  --velour-scar: #8f4d5e;
  --never-forget: #9d6f77;
  --rosy-brown: #b78d97;
  --candy-cane: #f7bdc5;
}

Tailwind CSS v4

/* Monkey Island to Candy Cane — https://swatchly.xyz/palette/5b3640-8f4d5e-9d6f77-b78d97-f7bdc5 */
@theme {
  --color-monkey-island: #5b3640;
  --color-monkey-island-50: #fff1f4;
  --color-monkey-island-100: #ffe3e9;
  --color-monkey-island-200: #f0cdd5;
  --color-monkey-island-300: #dcb5be;
  --color-monkey-island-400: #bf949f;
  --color-monkey-island-500: #a37983;
  --color-monkey-island-600: #875f69;
  --color-monkey-island-700: #6e4a53;
  --color-monkey-island-800: #5b3640;
  --color-monkey-island-900: #452a31;
  --color-monkey-island-950: #2c191e;
  --color-velour-scar: #8f4d5e;
  --color-velour-scar-50: #fff1f4;
  --color-velour-scar-100: #ffe1e7;
  --color-velour-scar-200: #fdc3cf;
  --color-velour-scar-300: #e9a8b6;
  --color-velour-scar-400: #cb8595;
  --color-velour-scar-500: #ad6879;
  --color-velour-scar-600: #8f4d5e;
  --color-velour-scar-700: #743b4a;
  --color-velour-scar-800: #5d2c39;
  --color-velour-scar-900: #4a202c;
  --color-velour-scar-950: #30121a;
  --color-never-forget: #9d6f77;
  --color-never-forget-50: #ffeff1;
  --color-never-forget-100: #ffdfe3;
  --color-never-forget-200: #efc7cd;
  --color-never-forget-300: #daadb5;
  --color-never-forget-400: #ba8c93;
  --color-never-forget-500: #9d6f77;
  --color-never-forget-600: #82575f;
  --color-never-forget-700: #6a434a;
  --color-never-forget-800: #55343a;
  --color-never-forget-900: #43272c;
  --color-never-forget-950: #2c171b;
  --color-rosy-brown: #b78d97;
  --color-rosy-brown-50: #ffedf1;
  --color-rosy-brown-100: #fcdee5;
  --color-rosy-brown-200: #ebc8d0;
  --color-rosy-brown-300: #d5afb8;
  --color-rosy-brown-400: #b78d97;
  --color-rosy-brown-500: #9c737d;
  --color-rosy-brown-600: #815b64;
  --color-rosy-brown-700: #69474f;
  --color-rosy-brown-800: #54373e;
  --color-rosy-brown-900: #432a30;
  --color-rosy-brown-950: #2b191e;
  --color-candy-cane: #f7bdc5;
  --color-candy-cane-50: #ffe9eb;
  --color-candy-cane-100: #ffd8dd;
  --color-candy-cane-200: #f7bdc5;
  --color-candy-cane-300: #ddaab1;
  --color-candy-cane-400: #c18b93;
  --color-candy-cane-500: #a67179;
  --color-candy-cane-600: #8b5961;
  --color-candy-cane-700: #72454c;
  --color-candy-cane-800: #5c353c;
  --color-candy-cane-900: #49282d;
  --color-candy-cane-950: #2f171b;
}