Melanzane to Plushy Pink Color Palette

About this palette

Melanzane to Plushy Pink is a 5-color muted, cool palette: #352733 (Melanzane), #38565E (Great Void), #508360 (Clouded Pine), #BFA2C1 (Novel Lilac), #ECB9A6 (Plushy Pink). It mixes gray, blue, green, pink, orange tones and feels cool overall. The strongest text pairing is #352733 on #ECB9A6 with a contrast ratio of 8.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(53, 39, 51)	hsl(309, 15%, 18%)
Great Void	rgb(56, 86, 94)	hsl(193, 25%, 29%)
Clouded Pine	rgb(80, 131, 96)	hsl(139, 24%, 41%)
Novel Lilac	rgb(191, 162, 193)	hsl(296, 20%, 70%)
Plushy Pink	rgb(236, 185, 166)	hsl(16, 65%, 79%)

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.

Aa8.10:1 Very good#352733 on #ECB9A6
Aa8.10:1 Very good#ECB9A6 on #352733
Aa6.15:1 Good#352733 on #BFA2C1
Aa6.15:1 Good#BFA2C1 on #352733
Aa4.53:1 Good#38565E on #ECB9A6
Aa4.53:1 Good#ECB9A6 on #38565E
Aa3.44:1 Poor#38565E on #BFA2C1
Aa3.44:1 Poor#BFA2C1 on #38565E

Color blindness preview

CSS variables

/* Melanzane to Plushy Pink — https://swatchly.xyz/palette/352733-38565e-508360-bfa2c1-ecb9a6 */
:root {
  --melanzane: #352733;
  --great-void: #38565e;
  --clouded-pine: #508360;
  --novel-lilac: #bfa2c1;
  --plushy-pink: #ecb9a6;
}

Tailwind CSS v4

/* Melanzane to Plushy Pink — https://swatchly.xyz/palette/352733-38565e-508360-bfa2c1-ecb9a6 */
@theme {
  --color-melanzane: #352733;
  --color-melanzane-50: #fcf1fa;
  --color-melanzane-100: #f3e7f1;
  --color-melanzane-200: #e0d3de;
  --color-melanzane-300: #cbbbc8;
  --color-melanzane-400: #ab9aa8;
  --color-melanzane-500: #8e7d8c;
  --color-melanzane-600: #726270;
  --color-melanzane-700: #594b57;
  --color-melanzane-800: #443842;
  --color-melanzane-900: #352733;
  --color-melanzane-950: #1e181d;
  --color-great-void: #38565e;
  --color-great-void-50: #e6f9fe;
  --color-great-void-100: #dbeff5;
  --color-great-void-200: #c3dce3;
  --color-great-void-300: #a8c5cd;
  --color-great-void-400: #86a5ae;
  --color-great-void-500: #698991;
  --color-great-void-600: #4f6d75;
  --color-great-void-700: #38565e;
  --color-great-void-800: #2b4349;
  --color-great-void-900: #203439;
  --color-great-void-950: #122024;
  --color-clouded-pine: #508360;
  --color-clouded-pine-50: #e0fee8;
  --color-clouded-pine-100: #d6f7df;
  --color-clouded-pine-200: #c0e7ca;
  --color-clouded-pine-300: #a7d3b3;
  --color-clouded-pine-400: #85b693;
  --color-clouded-pine-500: #699d79;
  --color-clouded-pine-600: #508360;
  --color-clouded-pine-700: #3a6949;
  --color-clouded-pine-800: #285337;
  --color-clouded-pine-900: #1b4028;
  --color-clouded-pine-950: #0e2817;
  --color-novel-lilac: #bfa2c1;
  --color-novel-lilac-50: #fff6ff;
  --color-novel-lilac-100: #fdebfe;
  --color-novel-lilac-200: #edd8ee;
  --color-novel-lilac-300: #dac2db;
  --color-novel-lilac-400: #bfa2c1;
  --color-novel-lilac-500: #a185a2;
  --color-novel-lilac-600: #836885;
  --color-novel-lilac-700: #69516b;
  --color-novel-lilac-800: #523d54;
  --color-novel-lilac-900: #3f2d40;
  --color-novel-lilac-950: #271a28;
  --color-plushy-pink: #ecb9a6;
  --color-plushy-pink-50: #fff6f2;
  --color-plushy-pink-100: #ffeae2;
  --color-plushy-pink-200: #f8d3c5;
  --color-plushy-pink-300: #ecb9a6;
  --color-plushy-pink-400: #c89a88;
  --color-plushy-pink-500: #ac7d6b;
  --color-plushy-pink-600: #8f6251;
  --color-plushy-pink-700: #744b3c;
  --color-plushy-pink-800: #5c392c;
  --color-plushy-pink-900: #482a1f;
  --color-plushy-pink-950: #2e1911;
}