Plantation to Mystical Shadow color palette

36594DPlantation 94CCD9Water Nymph C89889Café Crème 85697DMoonscape 392D36Mystical Shadow

About this palette

Plantation to Mystical Shadow is a 5-color muted, vintage palette: #36594D (Plantation), #94CCD9 (Water Nymph), #C89889 (Café Crème), #85697D (Moonscape), #392D36 (Mystical Shadow). It mixes turquoise, red, pink, gray tones and feels balanced overall. The strongest text pairing is #94CCD9 on #392D36 with a contrast ratio of 7.42:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plantation	rgb(54, 89, 77)	hsl(159, 24%, 28%)
Water Nymph	rgb(148, 204, 217)	hsl(191, 48%, 72%)
Café Crème	rgb(200, 152, 137)	hsl(14, 36%, 66%)
Moonscape	rgb(133, 105, 125)	hsl(317, 12%, 47%)
Mystical Shadow	rgb(57, 45, 54)	hsl(315, 12%, 20%)

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.

Aa7.42:1 Very good#94CCD9 on #392D36
Aa7.42:1 Very good#392D36 on #94CCD9
Aa5.18:1 Good#C89889 on #392D36
Aa5.18:1 Good#392D36 on #C89889
Aa4.42:1 Poor#36594D on #94CCD9
Aa4.42:1 Poor#94CCD9 on #36594D
Aa3.09:1 Poor#36594D on #C89889
Aa3.09:1 Poor#C89889 on #36594D

Color blindness preview

CSS variables

/* Plantation to Mystical Shadow — https://swatchly.xyz/palette/36594d-94ccd9-c89889-85697d-392d36 */
:root {
  --plantation: #36594d;
  --water-nymph: #94ccd9;
  --caf-cr-me: #c89889;
  --moonscape: #85697d;
  --mystical-shadow: #392d36;
}

Tailwind CSS v4

/* Plantation to Mystical Shadow — https://swatchly.xyz/palette/36594d-94ccd9-c89889-85697d-392d36 */
@theme {
  --color-plantation: #36594d;
  --color-plantation-50: #e6fbf3;
  --color-plantation-100: #daf2e8;
  --color-plantation-200: #c2ded3;
  --color-plantation-300: #a7c8bb;
  --color-plantation-400: #84a89b;
  --color-plantation-500: #688c7f;
  --color-plantation-600: #4e7064;
  --color-plantation-700: #36594d;
  --color-plantation-800: #2a453c;
  --color-plantation-900: #1e362e;
  --color-plantation-950: #11211c;
  --color-water-nymph: #94ccd9;
  --color-water-nymph-50: #e4faff;
  --color-water-nymph-100: #d0f3fb;
  --color-water-nymph-200: #b7e0ea;
  --color-water-nymph-300: #94ccd9;
  --color-water-nymph-400: #77acb8;
  --color-water-nymph-500: #5a909c;
  --color-water-nymph-600: #407581;
  --color-water-nymph-700: #2c5d68;
  --color-water-nymph-800: #1d4953;
  --color-water-nymph-900: #123941;
  --color-water-nymph-950: #082329;
  --color-caf-cr-me: #c89889;
  --color-caf-cr-me-50: #fff3f0;
  --color-caf-cr-me-100: #ffe7e0;
  --color-caf-cr-me-200: #f6d0c5;
  --color-caf-cr-me-300: #e3b9ac;
  --color-caf-cr-me-400: #c89889;
  --color-caf-cr-me-500: #aa7c6e;
  --color-caf-cr-me-600: #8d6254;
  --color-caf-cr-me-700: #734b3f;
  --color-caf-cr-me-800: #5c392f;
  --color-caf-cr-me-900: #482b22;
  --color-caf-cr-me-950: #2e1913;
  --color-moonscape: #85697d;
  --color-moonscape-50: #fff0fa;
  --color-moonscape-100: #fae6f4;
  --color-moonscape-200: #e9d2e2;
  --color-moonscape-300: #d6bcce;
  --color-moonscape-400: #b99db1;
  --color-moonscape-500: #9f8297;
  --color-moonscape-600: #85697d;
  --color-moonscape-700: #6b5264;
  --color-moonscape-800: #553f4f;
  --color-moonscape-900: #422f3d;
  --color-moonscape-950: #2a1c26;
  --color-mystical-shadow: #392d36;
  --color-mystical-shadow-50: #fbf2f8;
  --color-mystical-shadow-100: #f2e8ef;
  --color-mystical-shadow-200: #dfd3dc;
  --color-mystical-shadow-300: #cabcc6;
  --color-mystical-shadow-400: #ab9ca7;
  --color-mystical-shadow-500: #8f818b;
  --color-mystical-shadow-600: #746670;
  --color-mystical-shadow-700: #5c5059;
  --color-mystical-shadow-800: #483d45;
  --color-mystical-shadow-900: #392d36;
  --color-mystical-shadow-950: #221c20;
}