Seashell to Melanzane Color Palette

About this palette

Seashell to Melanzane is a 5-color muted, warm, gradient palette: #FFF5F3 (Seashell), #CDA3B1 (Young at Heart), #987980 (Opium), #6B4B66 (Hibernation), #362633 (Melanzane). It mixes white, pink, gray tones and feels warm overall. The strongest text pairing is #FFF5F3 on #362633 with a contrast ratio of 13.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seashell	rgb(255, 245, 243)	hsl(10, 100%, 98%)
Young at Heart	rgb(205, 163, 177)	hsl(340, 30%, 72%)
Opium	rgb(152, 121, 128)	hsl(346, 13%, 54%)
Hibernation	rgb(107, 75, 102)	hsl(309, 18%, 36%)
Melanzane	rgb(54, 38, 51)	hsl(311, 17%, 18%)

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.

Aa13.23:1 Super#FFF5F3 on #362633
Aa13.23:1 Super#362633 on #FFF5F3
Aa6.94:1 Good#FFF5F3 on #6B4B66
Aa6.94:1 Good#6B4B66 on #FFF5F3
Aa6.39:1 Good#CDA3B1 on #362633
Aa6.39:1 Good#362633 on #CDA3B1
Aa3.64:1 Poor#FFF5F3 on #987980
Aa3.64:1 Poor#987980 on #FFF5F3

Color blindness preview

CSS variables

/* Seashell to Melanzane — https://swatchly.xyz/palette/fff5f3-cda3b1-987980-6b4b66-362633 */
:root {
  --seashell: #fff5f3;
  --young-at-heart: #cda3b1;
  --opium: #987980;
  --hibernation: #6b4b66;
  --melanzane: #362633;
}

Tailwind CSS v4

/* Seashell to Melanzane — https://swatchly.xyz/palette/fff5f3-cda3b1-987980-6b4b66-362633 */
@theme {
  --color-seashell: #fff5f3;
  --color-seashell-50: #fff5f3;
  --color-seashell-100: #f2ecea;
  --color-seashell-200: #ded7d6;
  --color-seashell-300: #c8c0be;
  --color-seashell-400: #a9a09e;
  --color-seashell-500: #8d8482;
  --color-seashell-600: #726a68;
  --color-seashell-700: #5b5352;
  --color-seashell-800: #47413f;
  --color-seashell-900: #373130;
  --color-seashell-950: #221e1d;
  --color-young-at-heart: #cda3b1;
  --color-young-at-heart-50: #fff8fa;
  --color-young-at-heart-100: #ffeef3;
  --color-young-at-heart-200: #f7d9e2;
  --color-young-at-heart-300: #e6c3ce;
  --color-young-at-heart-400: #cda3b1;
  --color-young-at-heart-500: #ad8593;
  --color-young-at-heart-600: #8f6876;
  --color-young-at-heart-700: #73505c;
  --color-young-at-heart-800: #5b3c47;
  --color-young-at-heart-900: #462c35;
  --color-young-at-heart-950: #2b1920;
  --color-opium: #987980;
  --color-opium-50: #fff0f3;
  --color-opium-100: #f9e3e8;
  --color-opium-200: #e8ced3;
  --color-opium-300: #d3b6bc;
  --color-opium-400: #b4959c;
  --color-opium-500: #987980;
  --color-opium-600: #7d6067;
  --color-opium-700: #654b51;
  --color-opium-800: #503a3f;
  --color-opium-900: #3f2c30;
  --color-opium-950: #281a1e;
  --color-hibernation: #6b4b66;
  --color-hibernation-50: #fff0fc;
  --color-hibernation-100: #fbe3f6;
  --color-hibernation-200: #eacee5;
  --color-hibernation-300: #d6b6d0;
  --color-hibernation-400: #b896b3;
  --color-hibernation-500: #9d7b98;
  --color-hibernation-600: #82617d;
  --color-hibernation-700: #6b4b66;
  --color-hibernation-800: #543a50;
  --color-hibernation-900: #422c3e;
  --color-hibernation-950: #2a1a27;
  --color-melanzane: #362633;
  --color-melanzane-50: #fdf1fa;
  --color-melanzane-100: #f4e6f1;
  --color-melanzane-200: #e2d2de;
  --color-melanzane-300: #ccbbc9;
  --color-melanzane-400: #ad99a9;
  --color-melanzane-500: #907d8c;
  --color-melanzane-600: #746170;
  --color-melanzane-700: #5b4a57;
  --color-melanzane-800: #453742;
  --color-melanzane-900: #362633;
  --color-melanzane-950: #1f171d;
}