Ayahuasca Vine to Asparagus Sultan color palette

About this palette

Ayahuasca Vine to Asparagus Sultan is a 5-color cool, neon palette: #585100 (Ayahuasca Vine), #A7ACFF (Widowmaker), #9A4EFF (Orion Nebula), #E0D5FF (Icy Plains), #728500 (Asparagus Sultan). It mixes brown, purple, green tones and feels cool overall. The strongest text pairing is #585100 on #E0D5FF with a contrast ratio of 5.84:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ayahuasca Vinergb(88, 81, 0)hsl(55, 100%, 17%)
Widowmakerrgb(167, 172, 255)hsl(237, 100%, 83%)
Orion Nebulargb(154, 78, 255)hsl(266, 100%, 65%)
Icy Plainsrgb(224, 213, 255)hsl(256, 100%, 92%)
Asparagus Sultanrgb(114, 133, 0)hsl(69, 100%, 26%)

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.84:1 Good#585100 on #E0D5FF
  • Aa5.84:1 Good#E0D5FF on #585100
  • Aa3.85:1 Poor#585100 on #A7ACFF
  • Aa3.85:1 Poor#A7ACFF on #585100
  • Aa3.08:1 Poor#9A4EFF on #E0D5FF
  • Aa3.08:1 Poor#E0D5FF on #9A4EFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ayahuasca Vine to Asparagus Sultan — https://swatchly.xyz/palette/585100-a7acff-9a4eff-e0d5ff-728500 */
:root {
  --ayahuasca-vine: #585100;
  --widowmaker: #a7acff;
  --orion-nebula: #9a4eff;
  --icy-plains: #e0d5ff;
  --asparagus-sultan: #728500;
}

Tailwind CSS v4

/* Ayahuasca Vine to Asparagus Sultan — https://swatchly.xyz/palette/585100-a7acff-9a4eff-e0d5ff-728500 */
@theme {
  --color-ayahuasca-vine: #585100;
  --color-ayahuasca-vine-50: #faf7d1;
  --color-ayahuasca-vine-100: #f1eec3;
  --color-ayahuasca-vine-200: #ddd9a6;
  --color-ayahuasca-vine-300: #c7c286;
  --color-ayahuasca-vine-400: #a7a15f;
  --color-ayahuasca-vine-500: #8b8440;
  --color-ayahuasca-vine-600: #6f6925;
  --color-ayahuasca-vine-700: #585100;
  --color-ayahuasca-vine-800: #443f04;
  --color-ayahuasca-vine-900: #353000;
  --color-ayahuasca-vine-950: #211d00;
  --color-widowmaker: #a7acff;
  --color-widowmaker-50: #ebeeff;
  --color-widowmaker-100: #dde0ff;
  --color-widowmaker-200: #c3c8ff;
  --color-widowmaker-300: #a7acff;
  --color-widowmaker-400: #8b8fde;
  --color-widowmaker-500: #7275c3;
  --color-widowmaker-600: #5b5da6;
  --color-widowmaker-700: #48498b;
  --color-widowmaker-800: #383873;
  --color-widowmaker-900: #2c2b5e;
  --color-widowmaker-950: #1a1a3e;
  --color-orion-nebula: #9a4eff;
  --color-orion-nebula-50: #f6f2ff;
  --color-orion-nebula-100: #ece5ff;
  --color-orion-nebula-200: #dbccff;
  --color-orion-nebula-300: #c8aeff;
  --color-orion-nebula-400: #ae81ff;
  --color-orion-nebula-500: #9a4eff;
  --color-orion-nebula-600: #802ede;
  --color-orion-nebula-700: #6813bc;
  --color-orion-nebula-800: #53009a;
  --color-orion-nebula-900: #41007a;
  --color-orion-nebula-950: #290052;
  --color-icy-plains: #e0d5ff;
  --color-icy-plains-50: #f9f7ff;
  --color-icy-plains-100: #f1ecff;
  --color-icy-plains-200: #e0d5ff;
  --color-icy-plains-300: #c8bfe1;
  --color-icy-plains-400: #a89ec4;
  --color-icy-plains-500: #8c81a8;
  --color-icy-plains-600: #71668b;
  --color-icy-plains-700: #595071;
  --color-icy-plains-800: #453d59;
  --color-icy-plains-900: #352e46;
  --color-icy-plains-950: #211c2d;
  --color-asparagus-sultan: #728500;
  --color-asparagus-sultan-50: #edfbc1;
  --color-asparagus-sultan-100: #e0f0ad;
  --color-asparagus-sultan-200: #c9db8b;
  --color-asparagus-sultan-300: #b0c466;
  --color-asparagus-sultan-400: #8ea337;
  --color-asparagus-sultan-500: #728500;
  --color-asparagus-sultan-600: #5b6b00;
  --color-asparagus-sultan-700: #485500;
  --color-asparagus-sultan-800: #384300;
  --color-asparagus-sultan-900: #2c3400;
  --color-asparagus-sultan-950: #1b2100;
}

Similar palettes