Italian Grape to Strawberry Latte color palette

3E3D4DItalian Grape 708F79Toad 6F6F86Dark Prince DADBCASmell of Garlic C8ADB7Strawberry Latte

About this palette

Italian Grape to Strawberry Latte is a 5-color muted palette: #3E3D4D (Italian Grape), #708F79 (Toad), #6F6F86 (Dark Prince), #DADBCA (Smell of Garlic), #C8ADB7 (Strawberry Latte). It mixes gray, green, purple tones and feels cool overall. The strongest text pairing is #3E3D4D on #DADBCA with a contrast ratio of 7.56:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Grape	rgb(62, 61, 77)	hsl(244, 12%, 27%)
Toad	rgb(112, 143, 121)	hsl(137, 12%, 50%)
Dark Prince	rgb(111, 111, 134)	hsl(240, 9%, 48%)
Smell of Garlic	rgb(218, 219, 202)	hsl(64, 19%, 83%)
Strawberry Latte	rgb(200, 173, 183)	hsl(338, 20%, 73%)

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.56:1 Very good#3E3D4D on #DADBCA
Aa7.56:1 Very good#DADBCA on #3E3D4D
Aa5.11:1 Good#3E3D4D on #C8ADB7
Aa5.11:1 Good#C8ADB7 on #3E3D4D
Aa3.49:1 Poor#6F6F86 on #DADBCA
Aa3.49:1 Poor#DADBCA on #6F6F86

Color blindness preview

CSS variables

/* Italian Grape to Strawberry Latte — https://swatchly.xyz/palette/3e3d4d-708f79-6f6f86-dadbca-c8adb7 */
:root {
  --italian-grape: #3e3d4d;
  --toad: #708f79;
  --dark-prince: #6f6f86;
  --smell-of-garlic: #dadbca;
  --strawberry-latte: #c8adb7;
}

Tailwind CSS v4

/* Italian Grape to Strawberry Latte — https://swatchly.xyz/palette/3e3d4d-708f79-6f6f86-dadbca-c8adb7 */
@theme {
  --color-italian-grape: #3e3d4d;
  --color-italian-grape-50: #f4f4ff;
  --color-italian-grape-100: #eaeaf6;
  --color-italian-grape-200: #d6d6e5;
  --color-italian-grape-300: #bfbecf;
  --color-italian-grape-400: #9f9eb0;
  --color-italian-grape-500: #838294;
  --color-italian-grape-600: #686778;
  --color-italian-grape-700: #515060;
  --color-italian-grape-800: #3e3d4d;
  --color-italian-grape-900: #2f2f3a;
  --color-italian-grape-950: #1d1c24;
  --color-toad: #708f79;
  --color-toad-50: #e8fbed;
  --color-toad-100: #ddf1e2;
  --color-toad-200: #c6dfcd;
  --color-toad-300: #adc9b5;
  --color-toad-400: #8caa94;
  --color-toad-500: #708f79;
  --color-toad-600: #57745f;
  --color-toad-700: #425d4a;
  --color-toad-800: #314938;
  --color-toad-900: #24382a;
  --color-toad-950: #152319;
  --color-dark-prince: #6f6f86;
  --color-dark-prince-50: #f4f4ff;
  --color-dark-prince-100: #eaebfb;
  --color-dark-prince-200: #d7d8eb;
  --color-dark-prince-300: #c2c2d7;
  --color-dark-prince-400: #a3a3bb;
  --color-dark-prince-500: #8889a0;
  --color-dark-prince-600: #6f6f86;
  --color-dark-prince-700: #58586c;
  --color-dark-prince-800: #444456;
  --color-dark-prince-900: #343443;
  --color-dark-prince-950: #20202b;
  --color-smell-of-garlic: #dadbca;
  --color-smell-of-garlic-50: #f7f7ee;
  --color-smell-of-garlic-100: #edeee3;
  --color-smell-of-garlic-200: #dadbca;
  --color-smell-of-garlic-300: #c3c4b6;
  --color-smell-of-garlic-400: #a3a495;
  --color-smell-of-garlic-500: #888879;
  --color-smell-of-garlic-600: #6d6e5f;
  --color-smell-of-garlic-700: #565749;
  --color-smell-of-garlic-800: #434338;
  --color-smell-of-garlic-900: #33342a;
  --color-smell-of-garlic-950: #202019;
  --color-strawberry-latte: #c8adb7;
  --color-strawberry-latte-50: #fbeaf0;
  --color-strawberry-latte-100: #f0dde4;
  --color-strawberry-latte-200: #ddc7cf;
  --color-strawberry-latte-300: #c8adb7;
  --color-strawberry-latte-400: #aa909a;
  --color-strawberry-latte-500: #907780;
  --color-strawberry-latte-600: #775f68;
  --color-strawberry-latte-700: #604b53;
  --color-strawberry-latte-800: #4d3b42;
  --color-strawberry-latte-900: #3d2e34;
  --color-strawberry-latte-950: #271c20;
}