Start generating

Cinderella to Délicieux au Chocolat color palette

FFD4C7CinderellaECAE9CWax FlowerE87D57Sassy Salmon8F5D4AWeathered Leather6A3527Freshly Roasted Coffee411E17Délicieux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Cinderella to Délicieux au Chocolat is a 6-color warm, earthy, vintage, monochromatic, gradient palette: #FFD4C7 (Cinderella), #ECAE9C (Wax Flower), #E87D57 (Sassy Salmon), #8F5D4A (Weathered Leather), #6A3527 (Freshly Roasted Coffee), #411E17 (Délicieux au Chocolat). It mixes pink, orange, brown tones and feels warm overall. The strongest text pairing is #FFD4C7 on #411E17 with a contrast ratio of 10.89:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cinderellargb(255, 212, 199)hsl(14, 100%, 89%)
Wax Flowerrgb(236, 174, 156)hsl(13, 68%, 77%)
Sassy Salmonrgb(232, 125, 87)hsl(16, 76%, 63%)
Weathered Leatherrgb(143, 93, 74)hsl(17, 32%, 43%)
Freshly Roasted Coffeergb(106, 53, 39)hsl(13, 46%, 28%)
Délicieux au Chocolatrgb(65, 30, 23)hsl(10, 48%, 17%)

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.

  • Aa10.89:1 Very good#FFD4C7 on #411E17
  • Aa10.89:1 Very good#411E17 on #FFD4C7
  • Aa7.80:1 Very good#ECAE9C on #411E17
  • Aa7.80:1 Very good#411E17 on #ECAE9C
  • Aa7.20:1 Very good#FFD4C7 on #6A3527
  • Aa7.20:1 Very good#6A3527 on #FFD4C7
  • Aa5.27:1 Good#E87D57 on #411E17
  • Aa5.27:1 Good#411E17 on #E87D57

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cinderella to Délicieux au Chocolat — https://swatchly.xyz/palette/ffd4c7-ecae9c-e87d57-8f5d4a-6a3527-411e17 */
:root {
  --cinderella: #ffd4c7;
  --wax-flower: #ecae9c;
  --sassy-salmon: #e87d57;
  --weathered-leather: #8f5d4a;
  --freshly-roasted-coffee: #6a3527;
  --d-licieux-au-chocolat: #411e17;
}

Tailwind CSS v4

/* Cinderella to Délicieux au Chocolat — https://swatchly.xyz/palette/ffd4c7-ecae9c-e87d57-8f5d4a-6a3527-411e17 */
@theme {
  --color-cinderella: #ffd4c7;
  --color-cinderella-50: #fff9f7;
  --color-cinderella-100: #ffede8;
  --color-cinderella-200: #ffd4c7;
  --color-cinderella-300: #e1beb4;
  --color-cinderella-400: #c39c91;
  --color-cinderella-500: #a67f73;
  --color-cinderella-600: #896459;
  --color-cinderella-700: #6e4d43;
  --color-cinderella-800: #573a32;
  --color-cinderella-900: #442c25;
  --color-cinderella-950: #2c1a15;
  --color-wax-flower: #ecae9c;
  --color-wax-flower-50: #fff1ec;
  --color-wax-flower-100: #ffe3db;
  --color-wax-flower-200: #f9c9bb;
  --color-wax-flower-300: #ecae9c;
  --color-wax-flower-400: #ca907f;
  --color-wax-flower-500: #ae7464;
  --color-wax-flower-600: #915b4b;
  --color-wax-flower-700: #774638;
  --color-wax-flower-800: #603529;
  --color-wax-flower-900: #4c281d;
  --color-wax-flower-950: #311710;
  --color-sassy-salmon: #e87d57;
  --color-sassy-salmon-50: #fff1ec;
  --color-sassy-salmon-100: #ffe3d9;
  --color-sassy-salmon-200: #ffc7b4;
  --color-sassy-salmon-300: #ffa485;
  --color-sassy-salmon-400: #e87d57;
  --color-sassy-salmon-500: #c9623c;
  --color-sassy-salmon-600: #aa4722;
  --color-sassy-salmon-700: #8d330c;
  --color-sassy-salmon-800: #732300;
  --color-sassy-salmon-900: #5a1a00;
  --color-sassy-salmon-950: #3b0e00;
  --color-weathered-leather: #8f5d4a;
  --color-weathered-leather-50: #fff2ed;
  --color-weathered-leather-100: #ffe5db;
  --color-weathered-leather-200: #f7ccbc;
  --color-weathered-leather-300: #e4b4a2;
  --color-weathered-leather-400: #c79380;
  --color-weathered-leather-500: #ab7764;
  --color-weathered-leather-600: #8f5d4a;
  --color-weathered-leather-700: #744837;
  --color-weathered-leather-800: #5d3728;
  --color-weathered-leather-900: #49291c;
  --color-weathered-leather-950: #2f180f;
  --color-freshly-roasted-coffee: #6a3527;
  --color-freshly-roasted-coffee-50: #fff2ee;
  --color-freshly-roasted-coffee-100: #ffe5dd;
  --color-freshly-roasted-coffee-200: #fbcbbd;
  --color-freshly-roasted-coffee-300: #eab3a4;
  --color-freshly-roasted-coffee-400: #ce9282;
  --color-freshly-roasted-coffee-500: #b37767;
  --color-freshly-roasted-coffee-600: #965e4e;
  --color-freshly-roasted-coffee-700: #7c493b;
  --color-freshly-roasted-coffee-800: #6a3527;
  --color-freshly-roasted-coffee-900: #502a1f;
  --color-freshly-roasted-coffee-950: #351911;
  --color-d-licieux-au-chocolat: #411e17;
  --color-d-licieux-au-chocolat-50: #fff2ef;
  --color-d-licieux-au-chocolat-100: #ffe4de;
  --color-d-licieux-au-chocolat-200: #f2cec6;
  --color-d-licieux-au-chocolat-300: #deb6ae;
  --color-d-licieux-au-chocolat-400: #bf948a;
  --color-d-licieux-au-chocolat-500: #a1766d;
  --color-d-licieux-au-chocolat-600: #835b52;
  --color-d-licieux-au-chocolat-700: #67443d;
  --color-d-licieux-au-chocolat-800: #4f322b;
  --color-d-licieux-au-chocolat-900: #411e17;
  --color-d-licieux-au-chocolat-950: #231310;
}

Similar palettes