Ayahuasca Vine to Periwinkle color palette

605900Ayahuasca Vine B4B5FFPurple Illusion 5661D2Savoy Blue 343200Wasabi Nori 8E8B00Captain Kirk 898DFFPeriwinkle

Open in generator Export PNG, PDF, ASE…

About this palette

Ayahuasca Vine to Periwinkle is a 6-color palette: #605900 (Ayahuasca Vine), #B4B5FF (Purple Illusion), #5661D2 (Savoy Blue), #343200 (Wasabi Nori), #8E8B00 (Captain Kirk), #898DFF (Periwinkle). It mixes brown, purple, blue, yellow tones and feels balanced overall. The strongest text pairing is #B4B5FF on #343200 with a contrast ratio of 6.86:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ayahuasca Vine	rgb(96, 89, 0)	hsl(56, 100%, 19%)
Purple Illusion	rgb(180, 181, 255)	hsl(239, 100%, 85%)
Savoy Blue	rgb(86, 97, 210)	hsl(235, 58%, 58%)
Wasabi Nori	rgb(52, 50, 0)	hsl(58, 100%, 10%)
Captain Kirk	rgb(142, 139, 0)	hsl(59, 100%, 28%)
Periwinkle	rgb(137, 141, 255)	hsl(238, 100%, 77%)

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.86:1 Good#B4B5FF on #343200
Aa6.86:1 Good#343200 on #B4B5FF
Aa4.57:1 Good#343200 on #898DFF
Aa4.57:1 Good#898DFF on #343200
Aa3.76:1 Poor#605900 on #B4B5FF
Aa3.76:1 Poor#B4B5FF on #605900
Aa3.65:1 Poor#343200 on #8E8B00
Aa3.65:1 Poor#8E8B00 on #343200

Color blindness preview

CSS variables

/* Ayahuasca Vine to Periwinkle — https://swatchly.xyz/palette/605900-b4b5ff-5661d2-343200-8e8b00-898dff */
:root {
  --ayahuasca-vine: #605900;
  --purple-illusion: #b4b5ff;
  --savoy-blue: #5661d2;
  --wasabi-nori: #343200;
  --captain-kirk: #8e8b00;
  --periwinkle: #898dff;
}

Tailwind CSS v4

/* Ayahuasca Vine to Periwinkle — https://swatchly.xyz/palette/605900-b4b5ff-5661d2-343200-8e8b00-898dff */
@theme {
  --color-ayahuasca-vine: #605900;
  --color-ayahuasca-vine-50: #faf8cf;
  --color-ayahuasca-vine-100: #f1eec0;
  --color-ayahuasca-vine-200: #dfdba4;
  --color-ayahuasca-vine-300: #cac586;
  --color-ayahuasca-vine-400: #aca65f;
  --color-ayahuasca-vine-500: #918a40;
  --color-ayahuasca-vine-600: #767025;
  --color-ayahuasca-vine-700: #605900;
  --color-ayahuasca-vine-800: #4b4500;
  --color-ayahuasca-vine-900: #3a3500;
  --color-ayahuasca-vine-950: #242100;
  --color-purple-illusion: #b4b5ff;
  --color-purple-illusion-50: #f1f2ff;
  --color-purple-illusion-100: #e5e7ff;
  --color-purple-illusion-200: #ced0ff;
  --color-purple-illusion-300: #b4b5ff;
  --color-purple-illusion-400: #9697dc;
  --color-purple-illusion-500: #7c7bc1;
  --color-purple-illusion-600: #6361a3;
  --color-purple-illusion-700: #4e4c87;
  --color-purple-illusion-800: #3c3a6e;
  --color-purple-illusion-900: #2e2c59;
  --color-purple-illusion-950: #1c1a3a;
  --color-savoy-blue: #5661d2;
  --color-savoy-blue-50: #f2f5ff;
  --color-savoy-blue-100: #e6ebff;
  --color-savoy-blue-200: #ced7ff;
  --color-savoy-blue-300: #b2bfff;
  --color-savoy-blue-400: #8b9bff;
  --color-savoy-blue-500: #6e7cf0;
  --color-savoy-blue-600: #5661d2;
  --color-savoy-blue-700: #424ab1;
  --color-savoy-blue-800: #323791;
  --color-savoy-blue-900: #252875;
  --color-savoy-blue-950: #15174f;
  --color-wasabi-nori: #343200;
  --color-wasabi-nori-50: #f7f7dc;
  --color-wasabi-nori-100: #eeeece;
  --color-wasabi-nori-200: #dadab5;
  --color-wasabi-nori-300: #c4c49a;
  --color-wasabi-nori-400: #a5a476;
  --color-wasabi-nori-500: #898859;
  --color-wasabi-nori-600: #6e6d3f;
  --color-wasabi-nori-700: #57562c;
  --color-wasabi-nori-800: #43421e;
  --color-wasabi-nori-900: #343200;
  --color-wasabi-nori-950: #1f1e08;
  --color-captain-kirk: #8e8b00;
  --color-captain-kirk-50: #f9fac1;
  --color-captain-kirk-100: #f0f0af;
  --color-captain-kirk-200: #dddd8f;
  --color-captain-kirk-300: #c7c76b;
  --color-captain-kirk-400: #a9a73b;
  --color-captain-kirk-500: #8e8b00;
  --color-captain-kirk-600: #727000;
  --color-captain-kirk-700: #5b5900;
  --color-captain-kirk-800: #474500;
  --color-captain-kirk-900: #363500;
  --color-captain-kirk-950: #222100;
  --color-periwinkle: #898dff;
  --color-periwinkle-50: #f0f2ff;
  --color-periwinkle-100: #e3e6ff;
  --color-periwinkle-200: #cad0ff;
  --color-periwinkle-300: #aeb5ff;
  --color-periwinkle-400: #898dff;
  --color-periwinkle-500: #7072e1;
  --color-periwinkle-600: #5958c2;
  --color-periwinkle-700: #4642a3;
  --color-periwinkle-800: #363286;
  --color-periwinkle-900: #29256d;
  --color-periwinkle-950: #19154a;
}