Start generating

Asparagus Sultan to Coffee Whip color palette

76870AAsparagus Sultan171824Violet VoidB7D49EIn Good Taste49478EGalaxy Express4C3017Café NoirDD9753Coffee Whip
Open in generator Export PNG, PDF, ASE…

About this palette

Asparagus Sultan to Coffee Whip is a 6-color earthy palette: #76870A (Asparagus Sultan), #171824 (Violet Void), #B7D49E (In Good Taste), #49478E (Galaxy Express), #4C3017 (Café Noir), #DD9753 (Coffee Whip). It mixes green, black, purple, brown, orange tones and feels cool overall. The strongest text pairing is #171824 on #B7D49E with a contrast ratio of 10.84:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Asparagus Sultanrgb(118, 135, 10)hsl(68, 86%, 28%)
Violet Voidrgb(23, 24, 36)hsl(235, 22%, 12%)
In Good Tastergb(183, 212, 158)hsl(92, 39%, 73%)
Galaxy Expressrgb(73, 71, 142)hsl(242, 33%, 42%)
Café Noirrgb(76, 48, 23)hsl(28, 54%, 19%)
Coffee Whiprgb(221, 151, 83)hsl(30, 67%, 60%)

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.84:1 Very good#171824 on #B7D49E
  • Aa10.84:1 Very good#B7D49E on #171824
  • Aa7.42:1 Very good#B7D49E on #4C3017
  • Aa7.42:1 Very good#4C3017 on #B7D49E
  • Aa7.23:1 Very good#171824 on #DD9753
  • Aa7.23:1 Very good#DD9753 on #171824
  • Aa5.02:1 Good#B7D49E on #49478E
  • Aa5.02:1 Good#49478E on #B7D49E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Asparagus Sultan to Coffee Whip — https://swatchly.xyz/palette/76870a-171824-b7d49e-49478e-4c3017-dd9753 */
:root {
  --asparagus-sultan: #76870a;
  --violet-void: #171824;
  --in-good-taste: #b7d49e;
  --galaxy-express: #49478e;
  --caf-noir: #4c3017;
  --coffee-whip: #dd9753;
}

Tailwind CSS v4

/* Asparagus Sultan to Coffee Whip — https://swatchly.xyz/palette/76870a-171824-b7d49e-49478e-4c3017-dd9753 */
@theme {
  --color-asparagus-sultan: #76870a;
  --color-asparagus-sultan-50: #eefbc2;
  --color-asparagus-sultan-100: #e2f0af;
  --color-asparagus-sultan-200: #ccdc8d;
  --color-asparagus-sultan-300: #b3c569;
  --color-asparagus-sultan-400: #92a43b;
  --color-asparagus-sultan-500: #76870a;
  --color-asparagus-sultan-600: #5f6d00;
  --color-asparagus-sultan-700: #4b5600;
  --color-asparagus-sultan-800: #3a4400;
  --color-asparagus-sultan-900: #2d3500;
  --color-asparagus-sultan-950: #1c2100;
  --color-violet-void: #171824;
  --color-violet-void-50: #f3f4fe;
  --color-violet-void-100: #e9eaf5;
  --color-violet-void-200: #d5d6e3;
  --color-violet-void-300: #bec0ce;
  --color-violet-void-400: #9ea0b0;
  --color-violet-void-500: #828493;
  --color-violet-void-600: #666877;
  --color-violet-void-700: #4f515e;
  --color-violet-void-800: #3c3d48;
  --color-violet-void-900: #2c2d36;
  --color-violet-void-950: #171824;
  --color-in-good-taste: #b7d49e;
  --color-in-good-taste-50: #f1ffe5;
  --color-in-good-taste-100: #e6f8d8;
  --color-in-good-taste-200: #d2e6c0;
  --color-in-good-taste-300: #b7d49e;
  --color-in-good-taste-400: #98b281;
  --color-in-good-taste-500: #7a9562;
  --color-in-good-taste-600: #5f7948;
  --color-in-good-taste-700: #496033;
  --color-in-good-taste-800: #374b23;
  --color-in-good-taste-900: #283917;
  --color-in-good-taste-950: #18240b;
  --color-galaxy-express: #49478e;
  --color-galaxy-express-50: #f3f4ff;
  --color-galaxy-express-100: #e7e9ff;
  --color-galaxy-express-200: #d0d3ff;
  --color-galaxy-express-300: #b5b8fe;
  --color-galaxy-express-400: #9497e2;
  --color-galaxy-express-500: #797ac6;
  --color-galaxy-express-600: #5f5fa7;
  --color-galaxy-express-700: #49478e;
  --color-galaxy-express-800: #39376f;
  --color-galaxy-express-900: #2b2959;
  --color-galaxy-express-950: #1a183a;
  --color-caf-noir: #4c3017;
  --color-caf-noir-50: #fff3e9;
  --color-caf-noir-100: #fde7d5;
  --color-caf-noir-200: #ecd2bd;
  --color-caf-noir-300: #d8baa2;
  --color-caf-noir-400: #bc9b81;
  --color-caf-noir-500: #a18166;
  --color-caf-noir-600: #86674d;
  --color-caf-noir-700: #6e523a;
  --color-caf-noir-800: #59402b;
  --color-caf-noir-900: #4c3017;
  --color-caf-noir-950: #2f1f11;
  --color-coffee-whip: #dd9753;
  --color-coffee-whip-50: #fff6ee;
  --color-coffee-whip-100: #ffebda;
  --color-coffee-whip-200: #ffd3ac;
  --color-coffee-whip-300: #f5b983;
  --color-coffee-whip-400: #dd9753;
  --color-coffee-whip-500: #be7a35;
  --color-coffee-whip-600: #9f5e11;
  --color-coffee-whip-700: #804900;
  --color-coffee-whip-800: #653800;
  --color-coffee-whip-900: #4e2a00;
  --color-coffee-whip-950: #311800;
}

Similar palettes