Zoodles to Midnight Pie Color Palette

About this palette

Zoodles to Midnight Pie is a 4-color vintage palette: #B9C36D (Zoodles), #EBDFFF (Grape Taffy), #7D8149 (Grasshopper), #3A2F5C (Midnight Pie). It mixes green, purple tones and feels balanced overall. The strongest text pairing is #EBDFFF on #3A2F5C with a contrast ratio of 9.50:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zoodles	rgb(185, 195, 109)	hsl(67, 42%, 60%)
Grape Taffy	rgb(235, 223, 255)	hsl(262, 100%, 94%)
Grasshopper	rgb(125, 129, 73)	hsl(64, 28%, 40%)
Midnight Pie	rgb(58, 47, 92)	hsl(255, 32%, 27%)

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.

Aa9.50:1 Very good#EBDFFF on #3A2F5C
Aa9.50:1 Very good#3A2F5C on #EBDFFF
Aa6.37:1 Good#B9C36D on #3A2F5C
Aa6.37:1 Good#3A2F5C on #B9C36D
Aa3.24:1 Poor#EBDFFF on #7D8149
Aa3.24:1 Poor#7D8149 on #EBDFFF

Color blindness preview

CSS variables

/* Zoodles to Midnight Pie — https://swatchly.xyz/palette/b9c36d-ebdfff-7d8149-3a2f5c */
:root {
  --zoodles: #b9c36d;
  --grape-taffy: #ebdfff;
  --grasshopper: #7d8149;
  --midnight-pie: #3a2f5c;
}

Tailwind CSS v4

/* Zoodles to Midnight Pie — https://swatchly.xyz/palette/b9c36d-ebdfff-7d8149-3a2f5c */
@theme {
  --color-zoodles: #b9c36d;
  --color-zoodles-50: #f0f8c7;
  --color-zoodles-100: #e5edb6;
  --color-zoodles-200: #d0d998;
  --color-zoodles-300: #b9c36d;
  --color-zoodles-400: #9ba452;
  --color-zoodles-500: #818a33;
  --color-zoodles-600: #687016;
  --color-zoodles-700: #535900;
  --color-zoodles-800: #414600;
  --color-zoodles-900: #323700;
  --color-zoodles-950: #1f2200;
  --color-grape-taffy: #ebdfff;
  --color-grape-taffy-50: #f3edff;
  --color-grape-taffy-100: #ebdfff;
  --color-grape-taffy-200: #d7cee6;
  --color-grape-taffy-300: #c2b8d3;
  --color-grape-taffy-400: #a499b6;
  --color-grape-taffy-500: #897e9b;
  --color-grape-taffy-600: #706580;
  --color-grape-taffy-700: #5a5069;
  --color-grape-taffy-800: #463e53;
  --color-grape-taffy-900: #362f41;
  --color-grape-taffy-950: #221c29;
  --color-grasshopper: #7d8149;
  --color-grasshopper-50: #f3f7d6;
  --color-grasshopper-100: #e8ebc6;
  --color-grasshopper-200: #d2d7aa;
  --color-grasshopper-300: #babf8c;
  --color-grasshopper-400: #9a9e66;
  --color-grasshopper-500: #7d8149;
  --color-grasshopper-600: #656833;
  --color-grasshopper-700: #505322;
  --color-grasshopper-800: #3f4116;
  --color-grasshopper-900: #31330d;
  --color-grasshopper-950: #1e2005;
  --color-midnight-pie: #3a2f5c;
  --color-midnight-pie-50: #f5f3ff;
  --color-midnight-pie-100: #ebe8ff;
  --color-midnight-pie-200: #d8d1fb;
  --color-midnight-pie-300: #c2bae9;
  --color-midnight-pie-400: #a49acd;
  --color-midnight-pie-500: #8a80b3;
  --color-midnight-pie-600: #706697;
  --color-midnight-pie-700: #5b517e;
  --color-midnight-pie-800: #484068;
  --color-midnight-pie-900: #3a2f5c;
  --color-midnight-pie-950: #241f38;
}