Ayahuasca Vine to Frozen Periwinkle color palette

574C00Ayahuasca Vine 9B572CHello Fall 6A96DCBlue Bay DF9B7EBlushing Rose C4D5F4Frozen Periwinkle

About this palette

Ayahuasca Vine to Frozen Periwinkle is a 5-color warm, earthy, vintage palette: #574C00 (Ayahuasca Vine), #9B572C (Hello Fall), #6A96DC (Blue Bay), #DF9B7E (Blushing Rose), #C4D5F4 (Frozen Periwinkle). It mixes brown, blue, orange tones and feels warm overall. The strongest text pairing is #574C00 on #C4D5F4 with a contrast ratio of 5.81:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ayahuasca Vine	rgb(87, 76, 0)	hsl(52, 100%, 17%)
Hello Fall	rgb(155, 87, 44)	hsl(23, 56%, 39%)
Blue Bay	rgb(106, 150, 220)	hsl(217, 62%, 64%)
Blushing Rose	rgb(223, 155, 126)	hsl(18, 60%, 68%)
Frozen Periwinkle	rgb(196, 213, 244)	hsl(219, 69%, 86%)

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.

Aa5.81:1 Good#574C00 on #C4D5F4
Aa5.81:1 Good#C4D5F4 on #574C00
Aa3.74:1 Poor#574C00 on #DF9B7E
Aa3.74:1 Poor#DF9B7E on #574C00
Aa3.74:1 Poor#9B572C on #C4D5F4
Aa3.74:1 Poor#C4D5F4 on #9B572C

Color blindness preview

CSS variables

/* Ayahuasca Vine to Frozen Periwinkle — https://swatchly.xyz/palette/574c00-9b572c-6a96dc-df9b7e-c4d5f4 */
:root {
  --ayahuasca-vine: #574c00;
  --hello-fall: #9b572c;
  --blue-bay: #6a96dc;
  --blushing-rose: #df9b7e;
  --frozen-periwinkle: #c4d5f4;
}

Tailwind CSS v4

/* Ayahuasca Vine to Frozen Periwinkle — https://swatchly.xyz/palette/574c00-9b572c-6a96dc-df9b7e-c4d5f4 */
@theme {
  --color-ayahuasca-vine: #574c00;
  --color-ayahuasca-vine-50: #fcf7d3;
  --color-ayahuasca-vine-100: #f3edc4;
  --color-ayahuasca-vine-200: #e1d9a9;
  --color-ayahuasca-vine-300: #cec48e;
  --color-ayahuasca-vine-400: #b1a769;
  --color-ayahuasca-vine-500: #988d4d;
  --color-ayahuasca-vine-600: #7e7334;
  --color-ayahuasca-vine-700: #685e20;
  --color-ayahuasca-vine-800: #574c00;
  --color-ayahuasca-vine-900: #433b06;
  --color-ayahuasca-vine-950: #2b2501;
  --color-hello-fall: #9b572c;
  --color-hello-fall-50: #fff2eb;
  --color-hello-fall-100: #ffe5d7;
  --color-hello-fall-200: #ffcaad;
  --color-hello-fall-300: #f1b08b;
  --color-hello-fall-400: #d48e65;
  --color-hello-fall-500: #b87247;
  --color-hello-fall-600: #9b572c;
  --color-hello-fall-700: #7f421a;
  --color-hello-fall-800: #66310c;
  --color-hello-fall-900: #512404;
  --color-hello-fall-950: #351501;
  --color-blue-bay: #6a96dc;
  --color-blue-bay-50: #e9f1ff;
  --color-blue-bay-100: #d6e6ff;
  --color-blue-bay-200: #b3d1ff;
  --color-blue-bay-300: #8fb8f9;
  --color-blue-bay-400: #6a96dc;
  --color-blue-bay-500: #527cc0;
  --color-blue-bay-600: #3c64a3;
  --color-blue-bay-700: #2b4f88;
  --color-blue-bay-800: #1e3e70;
  --color-blue-bay-900: #15305b;
  --color-blue-bay-950: #0a1e3e;
  --color-blushing-rose: #df9b7e;
  --color-blushing-rose-50: #fff8f5;
  --color-blushing-rose-100: #ffede6;
  --color-blushing-rose-200: #ffd6c5;
  --color-blushing-rose-300: #f5bda5;
  --color-blushing-rose-400: #df9b7e;
  --color-blushing-rose-500: #bf7e62;
  --color-blushing-rose-600: #a06146;
  --color-blushing-rose-700: #824930;
  --color-blushing-rose-800: #683620;
  --color-blushing-rose-900: #512715;
  --color-blushing-rose-950: #331609;
  --color-frozen-periwinkle: #c4d5f4;
  --color-frozen-periwinkle-50: #edf3ff;
  --color-frozen-periwinkle-100: #dee9fd;
  --color-frozen-periwinkle-200: #c4d5f4;
  --color-frozen-periwinkle-300: #b0bfd9;
  --color-frozen-periwinkle-400: #91a0bc;
  --color-frozen-periwinkle-500: #7685a2;
  --color-frozen-periwinkle-600: #5d6b86;
  --color-frozen-periwinkle-700: #48556d;
  --color-frozen-periwinkle-800: #374358;
  --color-frozen-periwinkle-900: #293345;
  --color-frozen-periwinkle-950: #181f2c;
}