Asparagus Sultan to Sky Dancer color palette

7D8D00Asparagus Sultan 007F40Pharmaceutical Green D0B400Mustard F65B00Plastic Carrot 2EDCFFVaporwave Blue 40A0FFSky Dancer

Open in generator Export PNG, PDF, ASE…

About this palette

Asparagus Sultan to Sky Dancer is a 6-color vibrant, cool palette: #7D8D00 (Asparagus Sultan), #007F40 (Pharmaceutical Green), #D0B400 (Mustard), #F65B00 (Plastic Carrot), #2EDCFF (Vaporwave Blue), #40A0FF (Sky Dancer). It mixes green, yellow, orange, blue tones and feels cool overall. The strongest text pairing is #007F40 on #2EDCFF with a contrast ratio of 3.11:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Asparagus Sultan	rgb(125, 141, 0)	hsl(67, 100%, 28%)
Pharmaceutical Green	rgb(0, 127, 64)	hsl(150, 100%, 25%)
Mustard	rgb(208, 180, 0)	hsl(52, 100%, 41%)
Plastic Carrot	rgb(246, 91, 0)	hsl(22, 100%, 48%)
Vaporwave Blue	rgb(46, 220, 255)	hsl(190, 100%, 59%)
Sky Dancer	rgb(64, 160, 255)	hsl(210, 100%, 63%)

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.

Aa3.11:1 Poor#007F40 on #2EDCFF
Aa3.11:1 Poor#2EDCFF on #007F40

Color blindness preview

CSS variables

/* Asparagus Sultan to Sky Dancer — https://swatchly.xyz/palette/7d8d00-007f40-d0b400-f65b00-2edcff-40a0ff */
:root {
  --asparagus-sultan: #7d8d00;
  --pharmaceutical-green: #007f40;
  --mustard: #d0b400;
  --plastic-carrot: #f65b00;
  --vaporwave-blue: #2edcff;
  --sky-dancer: #40a0ff;
}

Tailwind CSS v4

/* Asparagus Sultan to Sky Dancer — https://swatchly.xyz/palette/7d8d00-007f40-d0b400-f65b00-2edcff-40a0ff */
@theme {
  --color-asparagus-sultan: #7d8d00;
  --color-asparagus-sultan-50: #f0fcc1;
  --color-asparagus-sultan-100: #e5f3af;
  --color-asparagus-sultan-200: #d0df8e;
  --color-asparagus-sultan-300: #b8c96a;
  --color-asparagus-sultan-400: #98a93a;
  --color-asparagus-sultan-500: #7d8d00;
  --color-asparagus-sultan-600: #647100;
  --color-asparagus-sultan-700: #4f5a00;
  --color-asparagus-sultan-800: #3e4600;
  --color-asparagus-sultan-900: #2f3600;
  --color-asparagus-sultan-950: #1d2200;
  --color-pharmaceutical-green: #007f40;
  --color-pharmaceutical-green-50: #deffe6;
  --color-pharmaceutical-green-100: #c1fcd0;
  --color-pharmaceutical-green-200: #a3ebb6;
  --color-pharmaceutical-green-300: #82d69b;
  --color-pharmaceutical-green-400: #57b777;
  --color-pharmaceutical-green-500: #339b5a;
  --color-pharmaceutical-green-600: #007f40;
  --color-pharmaceutical-green-700: #006532;
  --color-pharmaceutical-green-800: #004f25;
  --color-pharmaceutical-green-900: #003d1c;
  --color-pharmaceutical-green-950: #00270f;
  --color-mustard: #d0b400;
  --color-mustard-50: #fff0a7;
  --color-mustard-100: #f5e48e;
  --color-mustard-200: #e3ce65;
  --color-mustard-300: #d0b400;
  --color-mustard-400: #af9700;
  --color-mustard-500: #927e00;
  --color-mustard-600: #776600;
  --color-mustard-700: #5f5100;
  --color-mustard-800: #4c4000;
  --color-mustard-900: #3c3300;
  --color-mustard-950: #261f00;
  --color-plastic-carrot: #f65b00;
  --color-plastic-carrot-50: #ffece5;
  --color-plastic-carrot-100: #ffdcce;
  --color-plastic-carrot-200: #ffbda4;
  --color-plastic-carrot-300: #ff966e;
  --color-plastic-carrot-400: #f65b00;
  --color-plastic-carrot-500: #ce4b00;
  --color-plastic-carrot-600: #a83b00;
  --color-plastic-carrot-700: #882e00;
  --color-plastic-carrot-800: #6d2300;
  --color-plastic-carrot-900: #571a00;
  --color-plastic-carrot-950: #3b0f00;
  --color-vaporwave-blue: #2edcff;
  --color-vaporwave-blue-50: #ecfbff;
  --color-vaporwave-blue-100: #d4f6ff;
  --color-vaporwave-blue-200: #9aeaff;
  --color-vaporwave-blue-300: #2edcff;
  --color-vaporwave-blue-400: #00b9d8;
  --color-vaporwave-blue-500: #009ab4;
  --color-vaporwave-blue-600: #007b91;
  --color-vaporwave-blue-700: #006273;
  --color-vaporwave-blue-800: #004c5a;
  --color-vaporwave-blue-900: #003a45;
  --color-vaporwave-blue-950: #00242c;
  --color-sky-dancer: #40a0ff;
  --color-sky-dancer-50: #ebf4ff;
  --color-sky-dancer-100: #d9ebff;
  --color-sky-dancer-200: #b5d8ff;
  --color-sky-dancer-300: #89c1ff;
  --color-sky-dancer-400: #40a0ff;
  --color-sky-dancer-500: #1d84e1;
  --color-sky-dancer-600: #006abc;
  --color-sky-dancer-700: #005497;
  --color-sky-dancer-800: #004279;
  --color-sky-dancer-900: #00335f;
  --color-sky-dancer-950: #00203f;
}