Moelleux au Chocolat to Tuscan color palette

4F3215Moelleux au Chocolat 8F4323Chocolate Covered B96E45Dune Spice CABC6AThe Weight of Gold F8D2A3Tuscan

Open in generator Export PNG, PDF, ASE…

About this palette

Moelleux au Chocolat to Tuscan is a 5-color warm, earthy, vintage, gradient palette: #4F3215 (Moelleux au Chocolat), #8F4323 (Chocolate Covered), #B96E45 (Dune Spice), #CABC6A (The Weight of Gold), #F8D2A3 (Tuscan). It mixes brown, orange, yellow tones and feels warm overall. The strongest text pairing is #4F3215 on #F8D2A3 with a contrast ratio of 8.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moelleux au Chocolat	rgb(79, 50, 21)	hsl(30, 58%, 20%)
Chocolate Covered	rgb(143, 67, 35)	hsl(18, 61%, 35%)
Dune Spice	rgb(185, 110, 69)	hsl(21, 46%, 50%)
The Weight of Gold	rgb(202, 188, 106)	hsl(51, 48%, 60%)
Tuscan	rgb(248, 210, 163)	hsl(33, 86%, 81%)

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.

Aa8.19:1 Very good#4F3215 on #F8D2A3
Aa8.19:1 Very good#F8D2A3 on #4F3215
Aa6.06:1 Good#4F3215 on #CABC6A
Aa6.06:1 Good#CABC6A on #4F3215
Aa4.92:1 Good#8F4323 on #F8D2A3
Aa4.92:1 Good#F8D2A3 on #8F4323
Aa3.64:1 Poor#8F4323 on #CABC6A
Aa3.64:1 Poor#CABC6A on #8F4323

Color blindness preview

CSS variables

/* Moelleux au Chocolat to Tuscan — https://swatchly.xyz/palette/4f3215-8f4323-b96e45-cabc6a-f8d2a3 */
:root {
  --moelleux-au-chocolat: #4f3215;
  --chocolate-covered: #8f4323;
  --dune-spice: #b96e45;
  --the-weight-of-gold: #cabc6a;
  --tuscan: #f8d2a3;
}

Tailwind CSS v4

/* Moelleux au Chocolat to Tuscan — https://swatchly.xyz/palette/4f3215-8f4323-b96e45-cabc6a-f8d2a3 */
@theme {
  --color-moelleux-au-chocolat: #4f3215;
  --color-moelleux-au-chocolat-50: #fff3e8;
  --color-moelleux-au-chocolat-100: #fee7d2;
  --color-moelleux-au-chocolat-200: #edd2ba;
  --color-moelleux-au-chocolat-300: #d9ba9f;
  --color-moelleux-au-chocolat-400: #bd9c7e;
  --color-moelleux-au-chocolat-500: #a38163;
  --color-moelleux-au-chocolat-600: #88684b;
  --color-moelleux-au-chocolat-700: #715338;
  --color-moelleux-au-chocolat-800: #5c422a;
  --color-moelleux-au-chocolat-900: #4f3215;
  --color-moelleux-au-chocolat-950: #312010;
  --color-chocolate-covered: #8f4323;
  --color-chocolate-covered-50: #fff2ed;
  --color-chocolate-covered-100: #ffe5db;
  --color-chocolate-covered-200: #ffccb8;
  --color-chocolate-covered-300: #f9b093;
  --color-chocolate-covered-400: #de8e6f;
  --color-chocolate-covered-500: #c47353;
  --color-chocolate-covered-600: #a7593a;
  --color-chocolate-covered-700: #8f4323;
  --color-chocolate-covered-800: #723318;
  --color-chocolate-covered-900: #5b250d;
  --color-chocolate-covered-950: #3c1404;
  --color-dune-spice: #b96e45;
  --color-dune-spice-50: #fff2eb;
  --color-dune-spice-100: #ffe4d7;
  --color-dune-spice-200: #ffc9ad;
  --color-dune-spice-300: #f2ad89;
  --color-dune-spice-400: #d68b63;
  --color-dune-spice-500: #b96e45;
  --color-dune-spice-600: #9b542c;
  --color-dune-spice-700: #804019;
  --color-dune-spice-800: #672f0c;
  --color-dune-spice-900: #522304;
  --color-dune-spice-950: #361401;
  --color-the-weight-of-gold: #cabc6a;
  --color-the-weight-of-gold-50: #fbf3c5;
  --color-the-weight-of-gold-100: #f1e8b4;
  --color-the-weight-of-gold-200: #ded496;
  --color-the-weight-of-gold-300: #cabc6a;
  --color-the-weight-of-gold-400: #ab9e4f;
  --color-the-weight-of-gold-500: #91832f;
  --color-the-weight-of-gold-600: #776910;
  --color-the-weight-of-gold-700: #605400;
  --color-the-weight-of-gold-800: #4b4200;
  --color-the-weight-of-gold-900: #3b3300;
  --color-the-weight-of-gold-950: #251f00;
  --color-tuscan: #f8d2a3;
  --color-tuscan-50: #fff4e8;
  --color-tuscan-100: #ffe9ce;
  --color-tuscan-200: #f8d2a3;
  --color-tuscan-300: #dcbc96;
  --color-tuscan-400: #be9c71;
  --color-tuscan-500: #a38053;
  --color-tuscan-600: #86653a;
  --color-tuscan-700: #6d4f27;
  --color-tuscan-800: #573d19;
  --color-tuscan-900: #442e0f;
  --color-tuscan-950: #2b1c06;
}