Grape Taffy to Nightly Walk Color Palette

About this palette

Grape Taffy to Nightly Walk is a 5-color muted, cool, gradient palette: #F8D8FF (Grape Taffy), #C9B1D6 (Moonraker), #9C8CAE (Wizard’s Brew), #726888 (Heron), #4A4664 (Nightly Walk). It mixes purple tones and feels cool overall. The strongest text pairing is #F8D8FF on #4A4664 with a contrast ratio of 6.91:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape Taffy	rgb(248, 216, 255)	hsl(289, 100%, 92%)
Moonraker	rgb(201, 177, 214)	hsl(279, 31%, 77%)
Wizard’s Brew	rgb(156, 140, 174)	hsl(268, 17%, 62%)
Heron	rgb(114, 104, 136)	hsl(259, 13%, 47%)
Nightly Walk	rgb(74, 70, 100)	hsl(248, 18%, 33%)

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.

Aa6.91:1 Good#F8D8FF on #4A4664
Aa6.91:1 Good#4A4664 on #F8D8FF
Aa4.57:1 Good#C9B1D6 on #4A4664
Aa4.57:1 Good#4A4664 on #C9B1D6
Aa4.01:1 Poor#F8D8FF on #726888
Aa4.01:1 Poor#726888 on #F8D8FF

Color blindness preview

CSS variables

/* Grape Taffy to Nightly Walk — https://swatchly.xyz/palette/f8d8ff-c9b1d6-9c8cae-726888-4a4664 */
:root {
  --grape-taffy: #f8d8ff;
  --moonraker: #c9b1d6;
  --wizard-s-brew: #9c8cae;
  --heron: #726888;
  --nightly-walk: #4a4664;
}

Tailwind CSS v4

/* Grape Taffy to Nightly Walk — https://swatchly.xyz/palette/f8d8ff-c9b1d6-9c8cae-726888-4a4664 */
@theme {
  --color-grape-taffy: #f8d8ff;
  --color-grape-taffy-50: #fbe8ff;
  --color-grape-taffy-100: #f8d8ff;
  --color-grape-taffy-200: #e1c9e6;
  --color-grape-taffy-300: #cdb2d3;
  --color-grape-taffy-400: #b093b6;
  --color-grape-taffy-500: #95789c;
  --color-grape-taffy-600: #7b5f81;
  --color-grape-taffy-700: #644b69;
  --color-grape-taffy-800: #4f3954;
  --color-grape-taffy-900: #3d2b41;
  --color-grape-taffy-950: #271a2a;
  --color-moonraker: #c9b1d6;
  --color-moonraker-50: #f9edff;
  --color-moonraker-100: #f1e1f9;
  --color-moonraker-200: #ddcbe8;
  --color-moonraker-300: #c9b1d6;
  --color-moonraker-400: #aa93b6;
  --color-moonraker-500: #8f799b;
  --color-moonraker-600: #756081;
  --color-moonraker-700: #5e4b69;
  --color-moonraker-800: #4b3a54;
  --color-moonraker-900: #3b2c42;
  --color-moonraker-950: #251b2a;
  --color-wizard-s-brew: #9c8cae;
  --color-wizard-s-brew-50: #f5ecff;
  --color-wizard-s-brew-100: #eadef7;
  --color-wizard-s-brew-200: #d5c7e4;
  --color-wizard-s-brew-300: #bdaece;
  --color-wizard-s-brew-400: #9c8cae;
  --color-wizard-s-brew-500: #837394;
  --color-wizard-s-brew-600: #6b5c7b;
  --color-wizard-s-brew-700: #564964;
  --color-wizard-s-brew-800: #443951;
  --color-wizard-s-brew-900: #362c40;
  --color-wizard-s-brew-950: #231c2b;
  --color-heron: #726888;
  --color-heron-50: #f6f3ff;
  --color-heron-100: #eee8fe;
  --color-heron-200: #dbd4ee;
  --color-heron-300: #c6bddb;
  --color-heron-400: #a79dbe;
  --color-heron-500: #8c82a3;
  --color-heron-600: #726888;
  --color-heron-700: #5b526e;
  --color-heron-800: #473f58;
  --color-heron-900: #363045;
  --color-heron-950: #221d2c;
  --color-nightly-walk: #4a4664;
  --color-nightly-walk-50: #f5f4ff;
  --color-nightly-walk-100: #eae8ff;
  --color-nightly-walk-200: #d7d4ef;
  --color-nightly-walk-300: #c2bedd;
  --color-nightly-walk-400: #a4a0c1;
  --color-nightly-walk-500: #8a86a7;
  --color-nightly-walk-600: #716d8d;
  --color-nightly-walk-700: #5c5876;
  --color-nightly-walk-800: #4a4664;
  --color-nightly-walk-900: #39364d;
  --color-nightly-walk-950: #242232;
}