Amorous to Shadow Purple color palette

997797Amorous 9AB48AFoliage 415C38Turf C0F0C6Smell the Mint 795C8AMuted Purple 4A3950Shadow Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Amorous to Shadow Purple is a 6-color cool palette: #997797 (Amorous), #9AB48A (Foliage), #415C38 (Turf), #C0F0C6 (Smell the Mint), #795C8A (Muted Purple), #4A3950 (Shadow Purple). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #C0F0C6 on #4A3950 with a contrast ratio of 8.29:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Amorous	rgb(153, 119, 151)	hsl(304, 14%, 53%)
Foliage	rgb(154, 180, 138)	hsl(97, 22%, 62%)
Turf	rgb(65, 92, 56)	hsl(105, 24%, 29%)
Smell the Mint	rgb(192, 240, 198)	hsl(128, 62%, 85%)
Muted Purple	rgb(121, 92, 138)	hsl(278, 20%, 45%)
Shadow Purple	rgb(74, 57, 80)	hsl(284, 17%, 27%)

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.29:1 Very good#C0F0C6 on #4A3950
Aa8.29:1 Very good#4A3950 on #C0F0C6
Aa5.87:1 Good#415C38 on #C0F0C6
Aa5.87:1 Good#C0F0C6 on #415C38
Aa4.65:1 Good#9AB48A on #4A3950
Aa4.65:1 Good#4A3950 on #9AB48A
Aa4.45:1 Poor#C0F0C6 on #795C8A
Aa4.45:1 Poor#795C8A on #C0F0C6

Color blindness preview

CSS variables

/* Amorous to Shadow Purple — https://swatchly.xyz/palette/997797-9ab48a-415c38-c0f0c6-795c8a-4a3950 */
:root {
  --amorous: #997797;
  --foliage: #9ab48a;
  --turf: #415c38;
  --smell-the-mint: #c0f0c6;
  --muted-purple: #795c8a;
  --shadow-purple: #4a3950;
}

Tailwind CSS v4

/* Amorous to Shadow Purple — https://swatchly.xyz/palette/997797-9ab48a-415c38-c0f0c6-795c8a-4a3950 */
@theme {
  --color-amorous: #997797;
  --color-amorous-50: #ffeffe;
  --color-amorous-100: #f9e2f8;
  --color-amorous-200: #e8cce6;
  --color-amorous-300: #d3b4d1;
  --color-amorous-400: #b593b3;
  --color-amorous-500: #997797;
  --color-amorous-600: #7e5e7c;
  --color-amorous-700: #654964;
  --color-amorous-800: #51374f;
  --color-amorous-900: #3f2a3e;
  --color-amorous-950: #281927;
  --color-foliage: #9ab48a;
  --color-foliage-50: #effee7;
  --color-foliage-100: #e6f6dc;
  --color-foliage-200: #d2e5c6;
  --color-foliage-300: #bbd1ae;
  --color-foliage-400: #9ab48a;
  --color-foliage-500: #7d966e;
  --color-foliage-600: #627a53;
  --color-foliage-700: #4b613d;
  --color-foliage-800: #394c2c;
  --color-foliage-900: #2a3a1f;
  --color-foliage-950: #182310;
  --color-turf: #415c38;
  --color-turf-50: #eafbe4;
  --color-turf-100: #def2d8;
  --color-turf-200: #c8dfc0;
  --color-turf-300: #afc9a6;
  --color-turf-400: #8daa84;
  --color-turf-500: #718e68;
  --color-turf-600: #58734f;
  --color-turf-700: #415c38;
  --color-turf-800: #32482b;
  --color-turf-900: #25371f;
  --color-turf-950: #162311;
  --color-smell-the-mint: #c0f0c6;
  --color-smell-the-mint-50: #d9f6dc;
  --color-smell-the-mint-100: #c0f0c6;
  --color-smell-the-mint-200: #b6dbba;
  --color-smell-the-mint-300: #9ec7a3;
  --color-smell-the-mint-400: #7eaa84;
  --color-smell-the-mint-500: #63906a;
  --color-smell-the-mint-600: #4c7652;
  --color-smell-the-mint-700: #39603f;
  --color-smell-the-mint-800: #294c2f;
  --color-smell-the-mint-900: #1d3b22;
  --color-smell-the-mint-950: #0f2513;
  --color-muted-purple: #795c8a;
  --color-muted-purple-50: #faf2ff;
  --color-muted-purple-100: #f4e3ff;
  --color-muted-purple-200: #e4ccf3;
  --color-muted-purple-300: #cfb4df;
  --color-muted-purple-400: #b092c2;
  --color-muted-purple-500: #9476a6;
  --color-muted-purple-600: #795c8a;
  --color-muted-purple-700: #614770;
  --color-muted-purple-800: #4d365a;
  --color-muted-purple-900: #3c2947;
  --color-muted-purple-950: #26182e;
  --color-shadow-purple: #4a3950;
  --color-shadow-purple-50: #fbf1ff;
  --color-shadow-purple-100: #f3e6f8;
  --color-shadow-purple-200: #e1d1e6;
  --color-shadow-purple-300: #cbb9d1;
  --color-shadow-purple-400: #ac99b3;
  --color-shadow-purple-500: #907d97;
  --color-shadow-purple-600: #75637b;
  --color-shadow-purple-700: #5d4d63;
  --color-shadow-purple-800: #4a3950;
  --color-shadow-purple-900: #382c3c;
  --color-shadow-purple-950: #231a26;
}