In the Vines to Sweet Mint Pesto Color Palette

About this palette

In the Vines to Sweet Mint Pesto is a 5-color cool palette: #4F437F (In the Vines), #656E8B (Dark Prince), #7B9895 (Yucca), #93C39B (Irish Spring), #ACF09E (Sweet Mint Pesto). It mixes purple, blue, gray, green tones and feels cool overall. The strongest text pairing is #4F437F on #ACF09E with a contrast ratio of 6.43:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
In the Vines	rgb(79, 67, 127)	hsl(252, 31%, 38%)
Dark Prince	rgb(101, 110, 139)	hsl(226, 16%, 47%)
Yucca	rgb(123, 152, 149)	hsl(174, 12%, 54%)
Irish Spring	rgb(147, 195, 155)	hsl(130, 29%, 67%)
Sweet Mint Pesto	rgb(172, 240, 158)	hsl(110, 73%, 78%)

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.

Aa6.43:1 Good#4F437F on #ACF09E
Aa6.43:1 Good#ACF09E on #4F437F
Aa4.31:1 Poor#4F437F on #93C39B
Aa4.31:1 Poor#93C39B on #4F437F
Aa3.78:1 Poor#656E8B on #ACF09E
Aa3.78:1 Poor#ACF09E on #656E8B

Color blindness preview

CSS variables

/* In the Vines to Sweet Mint Pesto — https://swatchly.xyz/palette/4f437f-656e8b-7b9895-93c39b-acf09e */
:root {
  --in-the-vines: #4f437f;
  --dark-prince: #656e8b;
  --yucca: #7b9895;
  --irish-spring: #93c39b;
  --sweet-mint-pesto: #acf09e;
}

Tailwind CSS v4

/* In the Vines to Sweet Mint Pesto — https://swatchly.xyz/palette/4f437f-656e8b-7b9895-93c39b-acf09e */
@theme {
  --color-in-the-vines: #4f437f;
  --color-in-the-vines-50: #f5f4ff;
  --color-in-the-vines-100: #ebe8ff;
  --color-in-the-vines-200: #d5cfff;
  --color-in-the-vines-300: #beb5f1;
  --color-in-the-vines-400: #9d93d4;
  --color-in-the-vines-500: #8176b7;
  --color-in-the-vines-600: #665b98;
  --color-in-the-vines-700: #4f437f;
  --color-in-the-vines-800: #3d3463;
  --color-in-the-vines-900: #2f274e;
  --color-in-the-vines-950: #1d1733;
  --color-dark-prince: #656e8b;
  --color-dark-prince-50: #f1f5ff;
  --color-dark-prince-100: #e5ebff;
  --color-dark-prince-200: #d0d8f0;
  --color-dark-prince-300: #b9c2dd;
  --color-dark-prince-400: #99a3c1;
  --color-dark-prince-500: #7f88a6;
  --color-dark-prince-600: #656e8b;
  --color-dark-prince-700: #4f5771;
  --color-dark-prince-800: #3d435a;
  --color-dark-prince-900: #2e3347;
  --color-dark-prince-950: #1b202d;
  --color-yucca: #7b9895;
  --color-yucca-50: #ebfbf9;
  --color-yucca-100: #e2f4f2;
  --color-yucca-200: #cde3e0;
  --color-yucca-300: #b6cfcc;
  --color-yucca-400: #96b2af;
  --color-yucca-500: #7b9895;
  --color-yucca-600: #5f7b78;
  --color-yucca-700: #48625f;
  --color-yucca-800: #364c4a;
  --color-yucca-900: #273a38;
  --color-yucca-950: #162422;
  --color-irish-spring: #93c39b;
  --color-irish-spring-50: #dbf8df;
  --color-irish-spring-100: #ccedd1;
  --color-irish-spring-200: #b2d9b8;
  --color-irish-spring-300: #93c39b;
  --color-irish-spring-400: #77a57f;
  --color-irish-spring-500: #5e8c66;
  --color-irish-spring-600: #47724f;
  --color-irish-spring-700: #345c3d;
  --color-irish-spring-800: #274a2e;
  --color-irish-spring-900: #1c3b23;
  --color-irish-spring-950: #0f2514;
  --color-sweet-mint-pesto: #acf09e;
  --color-sweet-mint-pesto-50: #e9ffe4;
  --color-sweet-mint-pesto-100: #d3fbca;
  --color-sweet-mint-pesto-200: #acf09e;
  --color-sweet-mint-pesto-300: #9dd592;
  --color-sweet-mint-pesto-400: #78b66b;
  --color-sweet-mint-pesto-500: #5a9a4d;
  --color-sweet-mint-pesto-600: #407e32;
  --color-sweet-mint-pesto-700: #2b651e;
  --color-sweet-mint-pesto-800: #1c4f10;
  --color-sweet-mint-pesto-900: #113e06;
  --color-sweet-mint-pesto-950: #072702;
}