Such a Peach to Moelleux au Chocolat Color Palette

About this palette

Such a Peach to Moelleux au Chocolat is a 5-color cool, vintage palette: #FFDCA9 (Such a Peach), #DE96ED (Diva Mecha), #9975C0 (Viola), #005F5A (Mosque), #4A3000 (Moelleux au Chocolat). It mixes yellow, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #FFDCA9 on #4A3000 with a contrast ratio of 9.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Such a Peach	rgb(255, 220, 169)	hsl(36, 100%, 83%)
Diva Mecha	rgb(222, 150, 237)	hsl(290, 71%, 76%)
Viola	rgb(153, 117, 192)	hsl(269, 37%, 61%)
Mosque	rgb(0, 95, 90)	hsl(177, 100%, 19%)
Moelleux au Chocolat	rgb(74, 48, 0)	hsl(39, 100%, 15%)

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.37:1 Very good#FFDCA9 on #4A3000
Aa9.37:1 Very good#4A3000 on #FFDCA9
Aa5.77:1 Good#FFDCA9 on #005F5A
Aa5.77:1 Good#005F5A on #FFDCA9
Aa5.65:1 Good#DE96ED on #4A3000
Aa5.65:1 Good#4A3000 on #DE96ED
Aa3.48:1 Poor#DE96ED on #005F5A
Aa3.48:1 Poor#005F5A on #DE96ED

Color blindness preview

CSS variables

/* Such a Peach to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdca9-de96ed-9975c0-005f5a-4a3000 */
:root {
  --such-a-peach: #ffdca9;
  --diva-mecha: #de96ed;
  --viola: #9975c0;
  --mosque: #005f5a;
  --moelleux-au-chocolat: #4a3000;
}

Tailwind CSS v4

/* Such a Peach to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdca9-de96ed-9975c0-005f5a-4a3000 */
@theme {
  --color-such-a-peach: #ffdca9;
  --color-such-a-peach-50: #ffeacc;
  --color-such-a-peach-100: #ffdca9;
  --color-such-a-peach-200: #e6cba5;
  --color-such-a-peach-300: #d4b68b;
  --color-such-a-peach-400: #b79768;
  --color-such-a-peach-500: #9d7d4d;
  --color-such-a-peach-600: #836536;
  --color-such-a-peach-700: #6b5024;
  --color-such-a-peach-800: #553d16;
  --color-such-a-peach-900: #432f0c;
  --color-such-a-peach-950: #2b1c04;
  --color-diva-mecha: #de96ed;
  --color-diva-mecha-50: #fbe8ff;
  --color-diva-mecha-100: #f8d6ff;
  --color-diva-mecha-200: #efb6fb;
  --color-diva-mecha-300: #de96ed;
  --color-diva-mecha-400: #be7acd;
  --color-diva-mecha-500: #a45fb2;
  --color-diva-mecha-600: #894897;
  --color-diva-mecha-700: #71357d;
  --color-diva-mecha-800: #5b2766;
  --color-diva-mecha-900: #4a1c53;
  --color-diva-mecha-950: #300e36;
  --color-viola: #9975c0;
  --color-viola-50: #f8f3ff;
  --color-viola-100: #f1e7ff;
  --color-viola-200: #e4cdff;
  --color-viola-300: #d1b2f6;
  --color-viola-400: #b491db;
  --color-viola-500: #9975c0;
  --color-viola-600: #7d5aa2;
  --color-viola-700: #654586;
  --color-viola-800: #50336c;
  --color-viola-900: #3e2656;
  --color-viola-950: #271638;
  --color-mosque: #005f5a;
  --color-mosque-50: #d7fffa;
  --color-mosque-100: #c9f6f1;
  --color-mosque-200: #ade3de;
  --color-mosque-300: #8ecec8;
  --color-mosque-400: #67afa8;
  --color-mosque-500: #47938d;
  --color-mosque-600: #2a7771;
  --color-mosque-700: #005f5a;
  --color-mosque-800: #044a46;
  --color-mosque-900: #003936;
  --color-mosque-950: #002422;
  --color-moelleux-au-chocolat: #4a3000;
  --color-moelleux-au-chocolat-50: #fff3e3;
  --color-moelleux-au-chocolat-100: #fce8cc;
  --color-moelleux-au-chocolat-200: #ebd4b2;
  --color-moelleux-au-chocolat-300: #d7bc96;
  --color-moelleux-au-chocolat-400: #ba9d73;
  --color-moelleux-au-chocolat-500: #a08257;
  --color-moelleux-au-chocolat-600: #84683e;
  --color-moelleux-au-chocolat-700: #6c522b;
  --color-moelleux-au-chocolat-800: #57401d;
  --color-moelleux-au-chocolat-900: #4a3000;
  --color-moelleux-au-chocolat-950: #2d1f08;
}