Deep Pond to Purple’s Baby Sister Color Palette

About this palette

Deep Pond to Purple’s Baby Sister is a 5-color cool, earthy palette: #004522 (Deep Pond), #883B78 (Violet Vixen), #358D5A (Viridian), #6FC367 (Mantis), #F1C3F4 (Purple’s Baby Sister). It mixes green, pink tones and feels cool overall. The strongest text pairing is #004522 on #F1C3F4 with a contrast ratio of 7.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Pond	rgb(0, 69, 34)	hsl(150, 100%, 14%)
Violet Vixen	rgb(136, 59, 120)	hsl(312, 39%, 38%)
Viridian	rgb(53, 141, 90)	hsl(145, 45%, 38%)
Mantis	rgb(111, 195, 103)	hsl(115, 43%, 58%)
Purple’s Baby Sister	rgb(241, 195, 244)	hsl(296, 69%, 86%)

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.39:1 Very good#004522 on #F1C3F4
Aa7.39:1 Very good#F1C3F4 on #004522
Aa5.16:1 Good#004522 on #6FC367
Aa5.16:1 Good#6FC367 on #004522
Aa4.71:1 Good#883B78 on #F1C3F4
Aa4.71:1 Good#F1C3F4 on #883B78
Aa3.29:1 Poor#883B78 on #6FC367
Aa3.29:1 Poor#6FC367 on #883B78

Color blindness preview

CSS variables

/* Deep Pond to Purple’s Baby Sister — https://swatchly.xyz/palette/004522-883b78-358d5a-6fc367-f1c3f4 */
:root {
  --deep-pond: #004522;
  --violet-vixen: #883b78;
  --viridian: #358d5a;
  --mantis: #6fc367;
  --purple-s-baby-sister: #f1c3f4;
}

Tailwind CSS v4

/* Deep Pond to Purple’s Baby Sister — https://swatchly.xyz/palette/004522-883b78-358d5a-6fc367-f1c3f4 */
@theme {
  --color-deep-pond: #004522;
  --color-deep-pond-50: #deffe7;
  --color-deep-pond-100: #d1f6db;
  --color-deep-pond-200: #b8e5c4;
  --color-deep-pond-300: #9cd0ab;
  --color-deep-pond-400: #79b28b;
  --color-deep-pond-500: #5d9870;
  --color-deep-pond-600: #447e57;
  --color-deep-pond-700: #306744;
  --color-deep-pond-800: #215334;
  --color-deep-pond-900: #004522;
  --color-deep-pond-950: #0a2b17;
  --color-violet-vixen: #883b78;
  --color-violet-vixen-50: #fff0fb;
  --color-violet-vixen-100: #ffe1f6;
  --color-violet-vixen-200: #ffc3ef;
  --color-violet-vixen-300: #f1a8df;
  --color-violet-vixen-400: #d687c3;
  --color-violet-vixen-500: #bc6ba9;
  --color-violet-vixen-600: #a0518f;
  --color-violet-vixen-700: #883b78;
  --color-violet-vixen-800: #6c2c5f;
  --color-violet-vixen-900: #561f4b;
  --color-violet-vixen-950: #381030;
  --color-viridian: #358d5a;
  --color-viridian-50: #d5ffe2;
  --color-viridian-100: #c0f6d1;
  --color-viridian-200: #a1e2b7;
  --color-viridian-300: #80cb9b;
  --color-viridian-400: #57ab77;
  --color-viridian-500: #358d5a;
  --color-viridian-600: #1b7344;
  --color-viridian-700: #035d33;
  --color-viridian-800: #004a27;
  --color-viridian-900: #003a1d;
  --color-viridian-950: #002511;
  --color-mantis: #6fc367;
  --color-mantis-50: #ecffea;
  --color-mantis-100: #d2ffcd;
  --color-mantis-200: #b6f1b0;
  --color-mantis-300: #9ade93;
  --color-mantis-400: #6fc367;
  --color-mantis-500: #52a44a;
  --color-mantis-600: #33872c;
  --color-mantis-700: #1b6c15;
  --color-mantis-800: #075503;
  --color-mantis-900: #024100;
  --color-mantis-950: #012800;
  --color-purple-s-baby-sister: #f1c3f4;
  --color-purple-s-baby-sister-50: #feedff;
  --color-purple-s-baby-sister-100: #fbdefd;
  --color-purple-s-baby-sister-200: #f1c3f4;
  --color-purple-s-baby-sister-300: #d7b0d9;
  --color-purple-s-baby-sister-400: #b98fbc;
  --color-purple-s-baby-sister-500: #9e74a1;
  --color-purple-s-baby-sister-600: #835a86;
  --color-purple-s-baby-sister-700: #6a466d;
  --color-purple-s-baby-sister-800: #553557;
  --color-purple-s-baby-sister-900: #422744;
  --color-purple-s-baby-sister-950: #2a172c;
}