Start generating

Sugar Coated to Melanzane color palette

FFEEF1Sugar CoatedE4A4CAThink PinkBA7A70Döner Kebab753F46Wine Cellar3A2431Melanzane
Open in generator Export PNG, PDF, ASE…

About this palette

Sugar Coated to Melanzane is a 5-color warm, vintage, gradient palette: #FFEEF1 (Sugar Coated), #E4A4CA (Think Pink), #BA7A70 (Döner Kebab), #753F46 (Wine Cellar), #3A2431 (Melanzane). It mixes white, pink, red tones and feels warm overall. The strongest text pairing is #FFEEF1 on #3A2431 with a contrast ratio of 12.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sugar Coatedrgb(255, 238, 241)hsl(349, 100%, 97%)
Think Pinkrgb(228, 164, 202)hsl(324, 54%, 77%)
Döner Kebabrgb(186, 122, 112)hsl(8, 35%, 58%)
Wine Cellarrgb(117, 63, 70)hsl(352, 30%, 35%)
Melanzanergb(58, 36, 49)hsl(325, 23%, 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.

  • Aa12.70:1 Super#FFEEF1 on #3A2431
  • Aa12.70:1 Super#3A2431 on #FFEEF1
  • Aa7.34:1 Very good#FFEEF1 on #753F46
  • Aa7.34:1 Very good#753F46 on #FFEEF1
  • Aa7.09:1 Very good#E4A4CA on #3A2431
  • Aa7.09:1 Very good#3A2431 on #E4A4CA
  • Aa4.13:1 Poor#BA7A70 on #3A2431
  • Aa4.13:1 Poor#3A2431 on #BA7A70

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sugar Coated to Melanzane — https://swatchly.xyz/palette/ffeef1-e4a4ca-ba7a70-753f46-3a2431 */
:root {
  --sugar-coated: #ffeef1;
  --think-pink: #e4a4ca;
  --d-ner-kebab: #ba7a70;
  --wine-cellar: #753f46;
  --melanzane: #3a2431;
}

Tailwind CSS v4

/* Sugar Coated to Melanzane — https://swatchly.xyz/palette/ffeef1-e4a4ca-ba7a70-753f46-3a2431 */
@theme {
  --color-sugar-coated: #ffeef1;
  --color-sugar-coated-50: #ffeef1;
  --color-sugar-coated-100: #f1e6e8;
  --color-sugar-coated-200: #dfd2d5;
  --color-sugar-coated-300: #cabcbe;
  --color-sugar-coated-400: #ab9c9f;
  --color-sugar-coated-500: #908184;
  --color-sugar-coated-600: #76686a;
  --color-sugar-coated-700: #5e5154;
  --color-sugar-coated-800: #4a3f41;
  --color-sugar-coated-900: #393032;
  --color-sugar-coated-950: #241d1e;
  --color-think-pink: #e4a4ca;
  --color-think-pink-50: #ffecf6;
  --color-think-pink-100: #ffdbef;
  --color-think-pink-200: #f4c1de;
  --color-think-pink-300: #e4a4ca;
  --color-think-pink-400: #c387ab;
  --color-think-pink-500: #a86c91;
  --color-think-pink-600: #8c5476;
  --color-think-pink-700: #73405f;
  --color-think-pink-800: #5c304c;
  --color-think-pink-900: #4a243c;
  --color-think-pink-950: #301426;
  --color-d-ner-kebab: #ba7a70;
  --color-d-ner-kebab-50: #fff3f1;
  --color-d-ner-kebab-100: #ffe8e4;
  --color-d-ner-kebab-200: #ffcec6;
  --color-d-ner-kebab-300: #efb6ac;
  --color-d-ner-kebab-400: #d4958b;
  --color-d-ner-kebab-500: #ba7a70;
  --color-d-ner-kebab-600: #9b5f55;
  --color-d-ner-kebab-700: #7f4840;
  --color-d-ner-kebab-800: #66362f;
  --color-d-ner-kebab-900: #502722;
  --color-d-ner-kebab-950: #341712;
  --color-wine-cellar: #753f46;
  --color-wine-cellar-50: #fff1f2;
  --color-wine-cellar-100: #ffe3e5;
  --color-wine-cellar-200: #f9c8cd;
  --color-wine-cellar-300: #e6afb4;
  --color-wine-cellar-400: #c88d93;
  --color-wine-cellar-500: #ac7177;
  --color-wine-cellar-600: #8e565d;
  --color-wine-cellar-700: #753f46;
  --color-wine-cellar-800: #5b3136;
  --color-wine-cellar-900: #482429;
  --color-wine-cellar-950: #2e1518;
  --color-melanzane: #3a2431;
  --color-melanzane-50: #fff0f8;
  --color-melanzane-100: #f8e5ef;
  --color-melanzane-200: #e6d0dc;
  --color-melanzane-300: #d2b9c6;
  --color-melanzane-400: #b297a6;
  --color-melanzane-500: #957a89;
  --color-melanzane-600: #785f6e;
  --color-melanzane-700: #5f4955;
  --color-melanzane-800: #493641;
  --color-melanzane-900: #3a2431;
  --color-melanzane-950: #21161c;
}

Similar palettes