Start generating

Moelleux au Chocolat to Cotton Ball color palette

522E00Moelleux au Chocolat743C00Hazelnut Chocolate4F7C47Mana TreeD08AB9Pink PunkE3B6D5Sweet LilacEEF7FFCotton Ball
Open in generator Export PNG, PDF, ASE…

About this palette

Moelleux au Chocolat to Cotton Ball is a 6-color warm, vintage palette: #522E00 (Moelleux au Chocolat), #743C00 (Hazelnut Chocolate), #4F7C47 (Mana Tree), #D08AB9 (Pink Punk), #E3B6D5 (Sweet Lilac), #EEF7FF (Cotton Ball). It mixes brown, green, pink, white tones and feels warm overall. The strongest text pairing is #522E00 on #EEF7FF with a contrast ratio of 11.08:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Moelleux au Chocolatrgb(82, 46, 0)hsl(34, 100%, 16%)
Hazelnut Chocolatergb(116, 60, 0)hsl(31, 100%, 23%)
Mana Treergb(79, 124, 71)hsl(111, 27%, 38%)
Pink Punkrgb(208, 138, 185)hsl(320, 43%, 68%)
Sweet Lilacrgb(227, 182, 213)hsl(319, 45%, 80%)
Cotton Ballrgb(238, 247, 255)hsl(208, 100%, 97%)

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.

  • Aa11.08:1 Very good#522E00 on #EEF7FF
  • Aa11.08:1 Very good#EEF7FF on #522E00
  • Aa8.11:1 Very good#743C00 on #EEF7FF
  • Aa8.11:1 Very good#EEF7FF on #743C00
  • Aa6.81:1 Good#522E00 on #E3B6D5
  • Aa6.81:1 Good#E3B6D5 on #522E00
  • Aa4.99:1 Good#743C00 on #E3B6D5
  • Aa4.99:1 Good#E3B6D5 on #743C00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Moelleux au Chocolat to Cotton Ball — https://swatchly.xyz/palette/522e00-743c00-4f7c47-d08ab9-e3b6d5-eef7ff */
:root {
  --moelleux-au-chocolat: #522e00;
  --hazelnut-chocolate: #743c00;
  --mana-tree: #4f7c47;
  --pink-punk: #d08ab9;
  --sweet-lilac: #e3b6d5;
  --cotton-ball: #eef7ff;
}

Tailwind CSS v4

/* Moelleux au Chocolat to Cotton Ball — https://swatchly.xyz/palette/522e00-743c00-4f7c47-d08ab9-e3b6d5-eef7ff */
@theme {
  --color-moelleux-au-chocolat: #522e00;
  --color-moelleux-au-chocolat-50: #fff3e8;
  --color-moelleux-au-chocolat-100: #ffe6cf;
  --color-moelleux-au-chocolat-200: #f2d1b1;
  --color-moelleux-au-chocolat-300: #dfb995;
  --color-moelleux-au-chocolat-400: #c39a72;
  --color-moelleux-au-chocolat-500: #a87f56;
  --color-moelleux-au-chocolat-600: #8d653e;
  --color-moelleux-au-chocolat-700: #74502b;
  --color-moelleux-au-chocolat-800: #5f3f1d;
  --color-moelleux-au-chocolat-900: #522e00;
  --color-moelleux-au-chocolat-950: #321e08;
  --color-hazelnut-chocolate: #743c00;
  --color-hazelnut-chocolate-50: #fff2ea;
  --color-hazelnut-chocolate-100: #ffe6d4;
  --color-hazelnut-chocolate-200: #fccaa5;
  --color-hazelnut-chocolate-300: #e9b086;
  --color-hazelnut-chocolate-400: #ca8d5e;
  --color-hazelnut-chocolate-500: #ad703f;
  --color-hazelnut-chocolate-600: #8d5525;
  --color-hazelnut-chocolate-700: #743c00;
  --color-hazelnut-chocolate-800: #5a2f06;
  --color-hazelnut-chocolate-900: #472301;
  --color-hazelnut-chocolate-950: #2e1400;
  --color-mana-tree: #4f7c47;
  --color-mana-tree-50: #e3fede;
  --color-mana-tree-100: #d8f6d2;
  --color-mana-tree-200: #c0e5ba;
  --color-mana-tree-300: #a7d09f;
  --color-mana-tree-400: #85b27c;
  --color-mana-tree-500: #699760;
  --color-mana-tree-600: #4f7c47;
  --color-mana-tree-700: #3b6333;
  --color-mana-tree-800: #2a4e24;
  --color-mana-tree-900: #1e3d19;
  --color-mana-tree-950: #10260c;
  --color-pink-punk: #d08ab9;
  --color-pink-punk-50: #fff2fa;
  --color-pink-punk-100: #ffe3f5;
  --color-pink-punk-200: #fdc6ea;
  --color-pink-punk-300: #eaadd5;
  --color-pink-punk-400: #d08ab9;
  --color-pink-punk-500: #b26f9c;
  --color-pink-punk-600: #945480;
  --color-pink-punk-700: #793f68;
  --color-pink-punk-800: #612e52;
  --color-pink-punk-900: #4c2140;
  --color-pink-punk-950: #311228;
  --color-sweet-lilac: #e3b6d5;
  --color-sweet-lilac-50: #fff4fb;
  --color-sweet-lilac-100: #ffe6f7;
  --color-sweet-lilac-200: #f1d0e7;
  --color-sweet-lilac-300: #e3b6d5;
  --color-sweet-lilac-400: #c097b3;
  --color-sweet-lilac-500: #a47a97;
  --color-sweet-lilac-600: #875f7b;
  --color-sweet-lilac-700: #6d4963;
  --color-sweet-lilac-800: #56374d;
  --color-sweet-lilac-900: #43293c;
  --color-sweet-lilac-950: #2b1825;
  --color-cotton-ball: #eef7ff;
  --color-cotton-ball-50: #eef7ff;
  --color-cotton-ball-100: #e7ecf1;
  --color-cotton-ball-200: #d2d9de;
  --color-cotton-ball-300: #bbc2c9;
  --color-cotton-ball-400: #9ba3aa;
  --color-cotton-ball-500: #7f878e;
  --color-cotton-ball-600: #656d74;
  --color-cotton-ball-700: #4f565c;
  --color-cotton-ball-800: #3d4348;
  --color-cotton-ball-900: #2e3438;
  --color-cotton-ball-950: #1c2023;
}

Similar palettes