Start generating

Glazed Sugar to Moelleux au Chocolat color palette

FFDCC9Glazed Sugar25C4ACTurquoiseA791E2Dreamy Candy Forest856CAELavish Spending00684BJewel562C00Moelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Glazed Sugar to Moelleux au Chocolat is a 6-color cool palette: #FFDCC9 (Glazed Sugar), #25C4AC (Turquoise), #A791E2 (Dreamy Candy Forest), #856CAE (Lavish Spending), #00684B (Jewel), #562C00 (Moelleux au Chocolat). It mixes orange, turquoise, purple, brown tones and feels cool overall. The strongest text pairing is #FFDCC9 on #562C00 with a contrast ratio of 9.30:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Glazed Sugarrgb(255, 220, 201)hsl(21, 100%, 89%)
Turquoisergb(37, 196, 172)hsl(171, 68%, 46%)
Dreamy Candy Forestrgb(167, 145, 226)hsl(256, 58%, 73%)
Lavish Spendingrgb(133, 108, 174)hsl(263, 29%, 55%)
Jewelrgb(0, 104, 75)hsl(163, 100%, 20%)
Moelleux au Chocolatrgb(86, 44, 0)hsl(31, 100%, 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.

  • Aa9.30:1 Very good#FFDCC9 on #562C00
  • Aa9.30:1 Very good#562C00 on #FFDCC9
  • Aa5.45:1 Good#25C4AC on #562C00
  • Aa5.45:1 Good#562C00 on #25C4AC
  • Aa5.30:1 Good#FFDCC9 on #00684B
  • Aa5.30:1 Good#00684B on #FFDCC9
  • Aa4.44:1 Poor#A791E2 on #562C00
  • Aa4.44:1 Poor#562C00 on #A791E2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Glazed Sugar to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdcc9-25c4ac-a791e2-856cae-00684b-562c00 */
:root {
  --glazed-sugar: #ffdcc9;
  --turquoise: #25c4ac;
  --dreamy-candy-forest: #a791e2;
  --lavish-spending: #856cae;
  --jewel: #00684b;
  --moelleux-au-chocolat: #562c00;
}

Tailwind CSS v4

/* Glazed Sugar to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdcc9-25c4ac-a791e2-856cae-00684b-562c00 */
@theme {
  --color-glazed-sugar: #ffdcc9;
  --color-glazed-sugar-50: #ffebe0;
  --color-glazed-sugar-100: #ffdcc9;
  --color-glazed-sugar-200: #e6ccbd;
  --color-glazed-sugar-300: #d3b5a5;
  --color-glazed-sugar-400: #b69785;
  --color-glazed-sugar-500: #9c7c6b;
  --color-glazed-sugar-600: #816353;
  --color-glazed-sugar-700: #694f40;
  --color-glazed-sugar-800: #543c2f;
  --color-glazed-sugar-900: #412e23;
  --color-glazed-sugar-950: #2a1c14;
  --color-turquoise: #25c4ac;
  --color-turquoise-50: #e5fff9;
  --color-turquoise-100: #c0fff1;
  --color-turquoise-200: #98f2df;
  --color-turquoise-300: #73dfca;
  --color-turquoise-400: #25c4ac;
  --color-turquoise-500: #00a48f;
  --color-turquoise-600: #008472;
  --color-turquoise-700: #00685a;
  --color-turquoise-800: #005146;
  --color-turquoise-900: #003e35;
  --color-turquoise-950: #002620;
  --color-dreamy-candy-forest: #a791e2;
  --color-dreamy-candy-forest-50: #f5f3ff;
  --color-dreamy-candy-forest-100: #ece7ff;
  --color-dreamy-candy-forest-200: #dacfff;
  --color-dreamy-candy-forest-300: #c5b3fb;
  --color-dreamy-candy-forest-400: #a791e2;
  --color-dreamy-candy-forest-500: #8c76c4;
  --color-dreamy-candy-forest-600: #725ca6;
  --color-dreamy-candy-forest-700: #5b468a;
  --color-dreamy-candy-forest-800: #473570;
  --color-dreamy-candy-forest-900: #37275a;
  --color-dreamy-candy-forest-950: #22173b;
  --color-lavish-spending: #856cae;
  --color-lavish-spending-50: #f5f0ff;
  --color-lavish-spending-100: #ebe1ff;
  --color-lavish-spending-200: #dac6fe;
  --color-lavish-spending-300: #c2acea;
  --color-lavish-spending-400: #a289cc;
  --color-lavish-spending-500: #856cae;
  --color-lavish-spending-600: #6c5492;
  --color-lavish-spending-700: #574178;
  --color-lavish-spending-800: #453262;
  --color-lavish-spending-900: #36264e;
  --color-lavish-spending-950: #221634;
  --color-jewel: #00684b;
  --color-jewel-50: #dbffee;
  --color-jewel-100: #c7f8e2;
  --color-jewel-200: #ace7cd;
  --color-jewel-300: #8ed3b6;
  --color-jewel-400: #67b596;
  --color-jewel-500: #479a7a;
  --color-jewel-600: #2a7f61;
  --color-jewel-700: #00684b;
  --color-jewel-800: #00523a;
  --color-jewel-900: #003f2c;
  --color-jewel-950: #00281a;
  --color-moelleux-au-chocolat: #562c00;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #ffe6d3;
  --color-moelleux-au-chocolat-200: #f6cfb1;
  --color-moelleux-au-chocolat-300: #e3b795;
  --color-moelleux-au-chocolat-400: #c79772;
  --color-moelleux-au-chocolat-500: #ad7c56;
  --color-moelleux-au-chocolat-600: #91633d;
  --color-moelleux-au-chocolat-700: #784e2b;
  --color-moelleux-au-chocolat-800: #633d1d;
  --color-moelleux-au-chocolat-900: #562c00;
  --color-moelleux-au-chocolat-950: #351d08;
}

Similar palettes