Melanzane to Fog Syringa Color Palette

About this palette

Melanzane to Fog Syringa is a 4-color muted, cool, gradient palette: #332C3B (Melanzane), #635276 (Berry Jam), #A291AC (Wizard’s Brew), #C5B9D2 (Fog Syringa). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #332C3B on #C5B9D2 with a contrast ratio of 7.19:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(51, 44, 59)	hsl(268, 15%, 20%)
Berry Jam	rgb(99, 82, 118)	hsl(268, 18%, 39%)
Wizard’s Brew	rgb(162, 145, 172)	hsl(278, 14%, 62%)
Fog Syringa	rgb(197, 185, 210)	hsl(269, 22%, 77%)

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.

Aa7.19:1 Very good#332C3B on #C5B9D2
Aa7.19:1 Very good#C5B9D2 on #332C3B
Aa4.59:1 Good#332C3B on #A291AC
Aa4.59:1 Good#A291AC on #332C3B
Aa3.75:1 Poor#635276 on #C5B9D2
Aa3.75:1 Poor#C5B9D2 on #635276

Color blindness preview

CSS variables

/* Melanzane to Fog Syringa — https://swatchly.xyz/palette/332c3b-635276-a291ac-c5b9d2 */
:root {
  --melanzane: #332c3b;
  --berry-jam: #635276;
  --wizard-s-brew: #a291ac;
  --fog-syringa: #c5b9d2;
}

Tailwind CSS v4

/* Melanzane to Fog Syringa — https://swatchly.xyz/palette/332c3b-635276-a291ac-c5b9d2 */
@theme {
  --color-melanzane: #332c3b;
  --color-melanzane-50: #f8f3fe;
  --color-melanzane-100: #eee8f5;
  --color-melanzane-200: #dbd4e3;
  --color-melanzane-300: #c5bdce;
  --color-melanzane-400: #a59daf;
  --color-melanzane-500: #898193;
  --color-melanzane-600: #6e6677;
  --color-melanzane-700: #564f5e;
  --color-melanzane-800: #423d49;
  --color-melanzane-900: #332c3b;
  --color-melanzane-950: #1e1b23;
  --color-berry-jam: #635276;
  --color-berry-jam-50: #f8f2ff;
  --color-berry-jam-100: #f1e6ff;
  --color-berry-jam-200: #e0d2f1;
  --color-berry-jam-300: #cbbbde;
  --color-berry-jam-400: #ad9cc2;
  --color-berry-jam-500: #9381a8;
  --color-berry-jam-600: #79688d;
  --color-berry-jam-700: #635276;
  --color-berry-jam-800: #4e3f5d;
  --color-berry-jam-900: #3c3049;
  --color-berry-jam-950: #261d2f;
  --color-wizard-s-brew: #a291ac;
  --color-wizard-s-brew-50: #f8edfe;
  --color-wizard-s-brew-100: #ede1f4;
  --color-wizard-s-brew-200: #d9cbe1;
  --color-wizard-s-brew-300: #c2b2cb;
  --color-wizard-s-brew-400: #a291ac;
  --color-wizard-s-brew-500: #887892;
  --color-wizard-s-brew-600: #6f5f78;
  --color-wizard-s-brew-700: #594b61;
  --color-wizard-s-brew-800: #463a4d;
  --color-wizard-s-brew-900: #372d3d;
  --color-wizard-s-brew-950: #231c28;
  --color-fog-syringa: #c5b9d2;
  --color-fog-syringa-50: #f7f1ff;
  --color-fog-syringa-100: #eee6f6;
  --color-fog-syringa-200: #dad1e4;
  --color-fog-syringa-300: #c5b9d2;
  --color-fog-syringa-400: #a69ab2;
  --color-fog-syringa-500: #8b7f97;
  --color-fog-syringa-600: #70667c;
  --color-fog-syringa-700: #5a5064;
  --color-fog-syringa-800: #463e4f;
  --color-fog-syringa-900: #362f3e;
  --color-fog-syringa-950: #221d27;
}