Foliage to Plum Intended Color Palette

About this palette

Foliage to Plum Intended is a 4-color muted palette: #91B88F (Foliage), #507E80 (Submerged), #FFE9EE (Just Pink Enough), #643D4D (Plum Intended). It mixes green, turquoise, white, red tones and feels cool overall. The strongest text pairing is #FFE9EE on #643D4D with a contrast ratio of 7.83:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Foliage	rgb(145, 184, 143)	hsl(117, 22%, 64%)
Submerged	rgb(80, 126, 128)	hsl(182, 23%, 41%)
Just Pink Enough	rgb(255, 233, 238)	hsl(346, 100%, 96%)
Plum Intended	rgb(100, 61, 77)	hsl(335, 24%, 32%)

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.83:1 Very good#FFE9EE on #643D4D
Aa7.83:1 Very good#643D4D on #FFE9EE
Aa4.08:1 Poor#91B88F on #643D4D
Aa4.08:1 Poor#643D4D on #91B88F
Aa3.91:1 Poor#507E80 on #FFE9EE
Aa3.91:1 Poor#FFE9EE on #507E80

Color blindness preview

CSS variables

/* Foliage to Plum Intended — https://swatchly.xyz/palette/91b88f-507e80-ffe9ee-643d4d */
:root {
  --foliage: #91b88f;
  --submerged: #507e80;
  --just-pink-enough: #ffe9ee;
  --plum-intended: #643d4d;
}

Tailwind CSS v4

/* Foliage to Plum Intended — https://swatchly.xyz/palette/91b88f-507e80-ffe9ee-643d4d */
@theme {
  --color-foliage: #91b88f;
  --color-foliage-50: #ecffeb;
  --color-foliage-100: #e1f8df;
  --color-foliage-200: #cce8ca;
  --color-foliage-300: #b4d4b2;
  --color-foliage-400: #91b88f;
  --color-foliage-500: #749a73;
  --color-foliage-600: #597d57;
  --color-foliage-700: #426441;
  --color-foliage-800: #304e2f;
  --color-foliage-900: #233b22;
  --color-foliage-950: #132412;
  --color-submerged: #507e80;
  --color-submerged-50: #e1fbfc;
  --color-submerged-100: #d6f4f5;
  --color-submerged-200: #c0e3e4;
  --color-submerged-300: #a7cfd0;
  --color-submerged-400: #85b1b3;
  --color-submerged-500: #699899;
  --color-submerged-600: #507e80;
  --color-submerged-700: #3a6567;
  --color-submerged-800: #294f51;
  --color-submerged-900: #1c3d3e;
  --color-submerged-950: #0e2627;
  --color-just-pink-enough: #ffe9ee;
  --color-just-pink-enough-50: #fff6f8;
  --color-just-pink-enough-100: #ffe9ee;
  --color-just-pink-enough-200: #e6d6da;
  --color-just-pink-enough-300: #d0bec2;
  --color-just-pink-enough-400: #b19ea2;
  --color-just-pink-enough-500: #958286;
  --color-just-pink-enough-600: #79676b;
  --color-just-pink-enough-700: #615054;
  --color-just-pink-enough-800: #4c3e41;
  --color-just-pink-enough-900: #3b2f32;
  --color-just-pink-enough-950: #251d1f;
  --color-plum-intended: #643d4d;
  --color-plum-intended-50: #fff1f6;
  --color-plum-intended-100: #ffe2ed;
  --color-plum-intended-200: #f0ccd9;
  --color-plum-intended-300: #deb6c5;
  --color-plum-intended-400: #c297a7;
  --color-plum-intended-500: #a87c8d;
  --color-plum-intended-600: #8e6474;
  --color-plum-intended-700: #764f5f;
  --color-plum-intended-800: #643d4d;
  --color-plum-intended-900: #4d2f3b;
  --color-plum-intended-950: #321d25;
}