Purple’s Baby Sister to Zen Garden Olive color palette

ECC4F2Purple’s Baby Sister 82AA86Verdant Haven 7B618DMuted Purple 3F5130Zen Garden Olive

About this palette

Purple’s Baby Sister to Zen Garden Olive is a 4-color cool palette: #ECC4F2 (Purple’s Baby Sister), #82AA86 (Verdant Haven), #7B618D (Muted Purple), #3F5130 (Zen Garden Olive). It mixes purple, green tones and feels cool overall. The strongest text pairing is #ECC4F2 on #3F5130 with a contrast ratio of 5.65:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(236, 196, 242)	hsl(292, 64%, 86%)
Verdant Haven	rgb(130, 170, 134)	hsl(126, 19%, 59%)
Muted Purple	rgb(123, 97, 141)	hsl(275, 18%, 47%)
Zen Garden Olive	rgb(63, 81, 48)	hsl(93, 26%, 25%)

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.

Aa5.65:1 Good#ECC4F2 on #3F5130
Aa5.65:1 Good#3F5130 on #ECC4F2
Aa3.49:1 Poor#ECC4F2 on #7B618D
Aa3.49:1 Poor#7B618D on #ECC4F2
Aa3.31:1 Poor#82AA86 on #3F5130
Aa3.31:1 Poor#3F5130 on #82AA86

Color blindness preview

CSS variables

/* Purple’s Baby Sister to Zen Garden Olive — https://swatchly.xyz/palette/ecc4f2-82aa86-7b618d-3f5130 */
:root {
  --purple-s-baby-sister: #ecc4f2;
  --verdant-haven: #82aa86;
  --muted-purple: #7b618d;
  --zen-garden-olive: #3f5130;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Zen Garden Olive — https://swatchly.xyz/palette/ecc4f2-82aa86-7b618d-3f5130 */
@theme {
  --color-purple-s-baby-sister: #ecc4f2;
  --color-purple-s-baby-sister-50: #fdecff;
  --color-purple-s-baby-sister-100: #f8defc;
  --color-purple-s-baby-sister-200: #ecc4f2;
  --color-purple-s-baby-sister-300: #d2b1d8;
  --color-purple-s-baby-sister-400: #b590bb;
  --color-purple-s-baby-sister-500: #9a75a0;
  --color-purple-s-baby-sister-600: #7f5c84;
  --color-purple-s-baby-sister-700: #67476c;
  --color-purple-s-baby-sister-800: #523756;
  --color-purple-s-baby-sister-900: #402944;
  --color-purple-s-baby-sister-950: #29182b;
  --color-verdant-haven: #82aa86;
  --color-verdant-haven-50: #e4fbe6;
  --color-verdant-haven-100: #d7f2d9;
  --color-verdant-haven-200: #c0dfc2;
  --color-verdant-haven-300: #a5c9a9;
  --color-verdant-haven-400: #82aa86;
  --color-verdant-haven-500: #688f6c;
  --color-verdant-haven-600: #4f7453;
  --color-verdant-haven-700: #3b5d40;
  --color-verdant-haven-800: #2c4a30;
  --color-verdant-haven-900: #203923;
  --color-verdant-haven-950: #122414;
  --color-muted-purple: #7b618d;
  --color-muted-purple-50: #f9f2ff;
  --color-muted-purple-100: #f4e5ff;
  --color-muted-purple-200: #e4cff3;
  --color-muted-purple-300: #cfb7e0;
  --color-muted-purple-400: #b196c4;
  --color-muted-purple-500: #967ba9;
  --color-muted-purple-600: #7b618d;
  --color-muted-purple-700: #634b73;
  --color-muted-purple-800: #4e395c;
  --color-muted-purple-900: #3c2b48;
  --color-muted-purple-950: #261a2e;
  --color-zen-garden-olive: #3f5130;
  --color-zen-garden-olive-50: #eefae4;
  --color-zen-garden-olive-100: #e3f1d8;
  --color-zen-garden-olive-200: #cddec1;
  --color-zen-garden-olive-300: #b7caa9;
  --color-zen-garden-olive-400: #98ac89;
  --color-zen-garden-olive-500: #7e926f;
  --color-zen-garden-olive-600: #667956;
  --color-zen-garden-olive-700: #516343;
  --color-zen-garden-olive-800: #3f5130;
  --color-zen-garden-olive-900: #313e26;
  --color-zen-garden-olive-950: #1e2816;
}