Zucchini Noodles to Galactic Grapevine color palette

C4D78DZucchini Noodles ADAE90Quiet Thicket 95868FFemme Fatale 7F5E8AMuted Purple 683382Galactic Grapevine

Open in generator Export PNG, PDF, ASE…

About this palette

Zucchini Noodles to Galactic Grapevine is a 5-color cool palette: #C4D78D (Zucchini Noodles), #ADAE90 (Quiet Thicket), #95868F (Femme Fatale), #7F5E8A (Muted Purple), #683382 (Galactic Grapevine). It mixes green, yellow, gray, purple tones and feels cool overall. The strongest text pairing is #C4D78D on #683382 with a contrast ratio of 5.64:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini Noodles	rgb(196, 215, 141)	hsl(75, 48%, 70%)
Quiet Thicket	rgb(173, 174, 144)	hsl(62, 16%, 62%)
Femme Fatale	rgb(149, 134, 143)	hsl(324, 7%, 55%)
Muted Purple	rgb(127, 94, 138)	hsl(285, 19%, 45%)
Galactic Grapevine	rgb(104, 51, 130)	hsl(280, 44%, 35%)

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.64:1 Good#C4D78D on #683382
Aa5.64:1 Good#683382 on #C4D78D
Aa3.87:1 Poor#ADAE90 on #683382
Aa3.87:1 Poor#683382 on #ADAE90
Aa3.48:1 Poor#C4D78D on #7F5E8A
Aa3.48:1 Poor#7F5E8A on #C4D78D

Color blindness preview

CSS variables

/* Zucchini Noodles to Galactic Grapevine — https://swatchly.xyz/palette/c4d78d-adae90-95868f-7f5e8a-683382 */
:root {
  --zucchini-noodles: #c4d78d;
  --quiet-thicket: #adae90;
  --femme-fatale: #95868f;
  --muted-purple: #7f5e8a;
  --galactic-grapevine: #683382;
}

Tailwind CSS v4

/* Zucchini Noodles to Galactic Grapevine — https://swatchly.xyz/palette/c4d78d-adae90-95868f-7f5e8a-683382 */
@theme {
  --color-zucchini-noodles: #c4d78d;
  --color-zucchini-noodles-50: #e8f5c8;
  --color-zucchini-noodles-100: #dceab8;
  --color-zucchini-noodles-200: #c4d78d;
  --color-zucchini-noodles-300: #b0c181;
  --color-zucchini-noodles-400: #93a45e;
  --color-zucchini-noodles-500: #798a43;
  --color-zucchini-noodles-600: #61712b;
  --color-zucchini-noodles-700: #4d5b18;
  --color-zucchini-noodles-800: #3d480b;
  --color-zucchini-noodles-900: #2e3803;
  --color-zucchini-noodles-950: #1c2300;
  --color-quiet-thicket: #adae90;
  --color-quiet-thicket-50: #f9faea;
  --color-quiet-thicket-100: #f1f2e0;
  --color-quiet-thicket-200: #dfe0cb;
  --color-quiet-thicket-300: #cbccb3;
  --color-quiet-thicket-400: #adae90;
  --color-quiet-thicket-500: #909174;
  --color-quiet-thicket-600: #737458;
  --color-quiet-thicket-700: #5b5c42;
  --color-quiet-thicket-800: #464731;
  --color-quiet-thicket-900: #353623;
  --color-quiet-thicket-950: #202013;
  --color-femme-fatale: #95868f;
  --color-femme-fatale-50: #fcf3f8;
  --color-femme-fatale-100: #f4eaf0;
  --color-femme-fatale-200: #e2d6dd;
  --color-femme-fatale-300: #cdc0c8;
  --color-femme-fatale-400: #b0a1aa;
  --color-femme-fatale-500: #95868f;
  --color-femme-fatale-600: #796b73;
  --color-femme-fatale-700: #61545c;
  --color-femme-fatale-800: #4c4148;
  --color-femme-fatale-900: #3a3137;
  --color-femme-fatale-950: #241e22;
  --color-muted-purple: #7f5e8a;
  --color-muted-purple-50: #fbf1ff;
  --color-muted-purple-100: #f8e3ff;
  --color-muted-purple-200: #e8cdf1;
  --color-muted-purple-300: #d3b4de;
  --color-muted-purple-400: #b594c1;
  --color-muted-purple-500: #9a78a6;
  --color-muted-purple-600: #7f5e8a;
  --color-muted-purple-700: #664970;
  --color-muted-purple-800: #51375a;
  --color-muted-purple-900: #3f2946;
  --color-muted-purple-950: #28182d;
  --color-galactic-grapevine: #683382;
  --color-galactic-grapevine-50: #faf1ff;
  --color-galactic-grapevine-100: #f5e4ff;
  --color-galactic-grapevine-200: #eac6ff;
  --color-galactic-grapevine-300: #d9a8f4;
  --color-galactic-grapevine-400: #ba85d7;
  --color-galactic-grapevine-500: #9d67ba;
  --color-galactic-grapevine-600: #804c9b;
  --color-galactic-grapevine-700: #683382;
  --color-galactic-grapevine-800: #512865;
  --color-galactic-grapevine-900: #3f1d50;
  --color-galactic-grapevine-950: #280f34;
}