Monkey Island to Quiet Thicket Color Palette

About this palette

Monkey Island to Quiet Thicket is a 4-color muted palette: #4F3A36 (Monkey Island), #4E868D (Paradiso), #ECEAFF (Foundation White), #B0AE97 (Quiet Thicket). It mixes gray, turquoise, white tones and feels cool overall. The strongest text pairing is #4F3A36 on #ECEAFF with a contrast ratio of 8.93:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Monkey Island	rgb(79, 58, 54)	hsl(10, 19%, 26%)
Paradiso	rgb(78, 134, 141)	hsl(187, 29%, 43%)
Foundation White	rgb(236, 234, 255)	hsl(246, 100%, 96%)
Quiet Thicket	rgb(176, 174, 151)	hsl(55, 14%, 64%)

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.93:1 Very good#4F3A36 on #ECEAFF
Aa8.93:1 Very good#ECEAFF on #4F3A36
Aa4.69:1 Good#4F3A36 on #B0AE97
Aa4.69:1 Good#B0AE97 on #4F3A36
Aa3.47:1 Poor#4E868D on #ECEAFF
Aa3.47:1 Poor#ECEAFF on #4E868D

Color blindness preview

CSS variables

/* Monkey Island to Quiet Thicket — https://swatchly.xyz/palette/4f3a36-4e868d-eceaff-b0ae97 */
:root {
  --monkey-island: #4f3a36;
  --paradiso: #4e868d;
  --foundation-white: #eceaff;
  --quiet-thicket: #b0ae97;
}

Tailwind CSS v4

/* Monkey Island to Quiet Thicket — https://swatchly.xyz/palette/4f3a36-4e868d-eceaff-b0ae97 */
@theme {
  --color-monkey-island: #4f3a36;
  --color-monkey-island-50: #fff2ef;
  --color-monkey-island-100: #f8e7e4;
  --color-monkey-island-200: #e6d2ce;
  --color-monkey-island-300: #d1bbb6;
  --color-monkey-island-400: #b29a95;
  --color-monkey-island-500: #967e7a;
  --color-monkey-island-600: #7b645f;
  --color-monkey-island-700: #624e4a;
  --color-monkey-island-800: #4f3a36;
  --color-monkey-island-900: #3b2d2a;
  --color-monkey-island-950: #251b19;
  --color-paradiso: #4e868d;
  --color-paradiso-50: #dafafe;
  --color-paradiso-100: #caeff4;
  --color-paradiso-200: #afdbe1;
  --color-paradiso-300: #92c4ca;
  --color-paradiso-400: #6ca3aa;
  --color-paradiso-500: #4e868d;
  --color-paradiso-600: #376d73;
  --color-paradiso-700: #26575d;
  --color-paradiso-800: #19454a;
  --color-paradiso-900: #10363a;
  --color-paradiso-950: #072226;
  --color-foundation-white: #eceaff;
  --color-foundation-white-50: #f6f5ff;
  --color-foundation-white-100: #eceaff;
  --color-foundation-white-200: #d8d7e6;
  --color-foundation-white-300: #c1c0d1;
  --color-foundation-white-400: #a2a0b2;
  --color-foundation-white-500: #868497;
  --color-foundation-white-600: #6b6a7b;
  --color-foundation-white-700: #555363;
  --color-foundation-white-800: #42404e;
  --color-foundation-white-900: #32313d;
  --color-foundation-white-950: #1f1e27;
  --color-quiet-thicket: #b0ae97;
  --color-quiet-thicket-50: #fbfaed;
  --color-quiet-thicket-100: #f3f2e4;
  --color-quiet-thicket-200: #e2e0d0;
  --color-quiet-thicket-300: #cdccb9;
  --color-quiet-thicket-400: #b0ae97;
  --color-quiet-thicket-500: #92907a;
  --color-quiet-thicket-600: #76745e;
  --color-quiet-thicket-700: #5d5b48;
  --color-quiet-thicket-800: #484635;
  --color-quiet-thicket-900: #363527;
  --color-quiet-thicket-950: #212016;
}