In the Vines to Formosan Green color palette

524687In the Vines B2DEC7Quiet Jade 609471Paying Mantis 411833Blackberry 6F6232Himalaya AC9A3EFormosan Green

Open in generator Export PNG, PDF, ASE…

About this palette

In the Vines to Formosan Green is a 6-color earthy, vintage palette: #524687 (In the Vines), #B2DEC7 (Quiet Jade), #609471 (Paying Mantis), #411833 (Blackberry), #6F6232 (Himalaya), #AC9A3E (Formosan Green). It mixes purple, green, red, brown, yellow tones and feels balanced overall. The strongest text pairing is #B2DEC7 on #411833 with a contrast ratio of 10.10:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
In the Vines	rgb(82, 70, 135)	hsl(251, 32%, 40%)
Quiet Jade	rgb(178, 222, 199)	hsl(149, 40%, 78%)
Paying Mantis	rgb(96, 148, 113)	hsl(140, 21%, 48%)
Blackberry	rgb(65, 24, 51)	hsl(320, 46%, 17%)
Himalaya	rgb(111, 98, 50)	hsl(47, 38%, 32%)
Formosan Green	rgb(172, 154, 62)	hsl(50, 47%, 46%)

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.

Aa10.10:1 Very good#B2DEC7 on #411833
Aa10.10:1 Very good#411833 on #B2DEC7
Aa5.48:1 Good#524687 on #B2DEC7
Aa5.48:1 Good#B2DEC7 on #524687
Aa5.31:1 Good#411833 on #AC9A3E
Aa5.31:1 Good#AC9A3E on #411833
Aa4.26:1 Poor#609471 on #411833
Aa4.26:1 Poor#411833 on #609471

Color blindness preview

CSS variables

/* In the Vines to Formosan Green — https://swatchly.xyz/palette/524687-b2dec7-609471-411833-6f6232-ac9a3e */
:root {
  --in-the-vines: #524687;
  --quiet-jade: #b2dec7;
  --paying-mantis: #609471;
  --blackberry: #411833;
  --himalaya: #6f6232;
  --formosan-green: #ac9a3e;
}

Tailwind CSS v4

/* In the Vines to Formosan Green — https://swatchly.xyz/palette/524687-b2dec7-609471-411833-6f6232-ac9a3e */
@theme {
  --color-in-the-vines: #524687;
  --color-in-the-vines-50: #f5f4ff;
  --color-in-the-vines-100: #eae8ff;
  --color-in-the-vines-200: #d5d0ff;
  --color-in-the-vines-300: #beb6f6;
  --color-in-the-vines-400: #9e95da;
  --color-in-the-vines-500: #8378be;
  --color-in-the-vines-600: #685ea0;
  --color-in-the-vines-700: #524687;
  --color-in-the-vines-800: #40366a;
  --color-in-the-vines-900: #312954;
  --color-in-the-vines-950: #1e1837;
  --color-quiet-jade: #b2dec7;
  --color-quiet-jade-50: #dff9eb;
  --color-quiet-jade-100: #d2efdf;
  --color-quiet-jade-200: #b2dec7;
  --color-quiet-jade-300: #a1c7b3;
  --color-quiet-jade-400: #80a994;
  --color-quiet-jade-500: #658e7a;
  --color-quiet-jade-600: #4d7461;
  --color-quiet-jade-700: #395e4c;
  --color-quiet-jade-800: #2a4a3b;
  --color-quiet-jade-900: #1e392c;
  --color-quiet-jade-950: #10241b;
  --color-paying-mantis: #609471;
  --color-paying-mantis-50: #e0fee9;
  --color-paying-mantis-100: #d4f5dd;
  --color-paying-mantis-200: #bbe3c7;
  --color-paying-mantis-300: #a0ceae;
  --color-paying-mantis-400: #7daf8d;
  --color-paying-mantis-500: #609471;
  --color-paying-mantis-600: #467958;
  --color-paying-mantis-700: #326143;
  --color-paying-mantis-800: #234c32;
  --color-paying-mantis-900: #183b25;
  --color-paying-mantis-950: #0c2515;
  --color-blackberry: #411833;
  --color-blackberry-50: #fff0f9;
  --color-blackberry-100: #ffe1f2;
  --color-blackberry-200: #f2cae1;
  --color-blackberry-300: #dfb1cc;
  --color-blackberry-400: #c08eac;
  --color-blackberry-500: #a2718e;
  --color-blackberry-600: #835671;
  --color-blackberry-700: #683f58;
  --color-blackberry-800: #4f2d42;
  --color-blackberry-900: #411833;
  --color-blackberry-950: #23111c;
  --color-himalaya: #6f6232;
  --color-himalaya-50: #fdf5d9;
  --color-himalaya-100: #f2eac9;
  --color-himalaya-200: #dfd4ae;
  --color-himalaya-300: #c8bc90;
  --color-himalaya-400: #a89b6b;
  --color-himalaya-500: #8b7e4d;
  --color-himalaya-600: #6f6232;
  --color-himalaya-700: #594d23;
  --color-himalaya-800: #463c17;
  --color-himalaya-900: #372e0f;
  --color-himalaya-950: #221c06;
  --color-formosan-green: #ac9a3e;
  --color-formosan-green-50: #fdf4c2;
  --color-formosan-green-100: #f3e8b0;
  --color-formosan-green-200: #e1d390;
  --color-formosan-green-300: #cbbb6d;
  --color-formosan-green-400: #ac9a3e;
  --color-formosan-green-500: #92801e;
  --color-formosan-green-600: #776700;
  --color-formosan-green-700: #5f5200;
  --color-formosan-green-800: #4b4000;
  --color-formosan-green-900: #3b3200;
  --color-formosan-green-950: #261f00;
}