Start generating

Cold Brew Coffee to Moelleux au Chocolat color palette

785536Cold Brew CoffeeF9E2D2FondantB98F6ACaramel GoldF8BE9ABlushing Cinnamon56320EMoelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Cold Brew Coffee to Moelleux au Chocolat is a 5-color warm, earthy, vintage, monochromatic palette: #785536 (Cold Brew Coffee), #F9E2D2 (Fondant), #B98F6A (Caramel Gold), #F8BE9A (Blushing Cinnamon), #56320E (Moelleux au Chocolat). It mixes brown, gray, orange tones and feels warm overall. The strongest text pairing is #F9E2D2 on #56320E with a contrast ratio of 9.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cold Brew Coffeergb(120, 85, 54)hsl(28, 38%, 34%)
Fondantrgb(249, 226, 210)hsl(25, 76%, 90%)
Caramel Goldrgb(185, 143, 106)hsl(28, 36%, 57%)
Blushing Cinnamonrgb(248, 190, 154)hsl(23, 87%, 79%)
Moelleux au Chocolatrgb(86, 50, 14)hsl(30, 72%, 20%)

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.06:1 Very good#F9E2D2 on #56320E
  • Aa9.06:1 Very good#56320E on #F9E2D2
  • Aa6.90:1 Good#F8BE9A on #56320E
  • Aa6.90:1 Good#56320E on #F8BE9A
  • Aa5.34:1 Good#785536 on #F9E2D2
  • Aa5.34:1 Good#F9E2D2 on #785536
  • Aa4.07:1 Poor#785536 on #F8BE9A
  • Aa4.07:1 Poor#F8BE9A on #785536

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cold Brew Coffee to Moelleux au Chocolat — https://swatchly.xyz/palette/785536-f9e2d2-b98f6a-f8be9a-56320e */
:root {
  --cold-brew-coffee: #785536;
  --fondant: #f9e2d2;
  --caramel-gold: #b98f6a;
  --blushing-cinnamon: #f8be9a;
  --moelleux-au-chocolat: #56320e;
}

Tailwind CSS v4

/* Cold Brew Coffee to Moelleux au Chocolat — https://swatchly.xyz/palette/785536-f9e2d2-b98f6a-f8be9a-56320e */
@theme {
  --color-cold-brew-coffee: #785536;
  --color-cold-brew-coffee-50: #fff3e9;
  --color-cold-brew-coffee-100: #ffe6d1;
  --color-cold-brew-coffee-200: #f1d3ba;
  --color-cold-brew-coffee-300: #dfbda1;
  --color-cold-brew-coffee-400: #c39e7f;
  --color-cold-brew-coffee-500: #a98463;
  --color-cold-brew-coffee-600: #8f6a4b;
  --color-cold-brew-coffee-700: #785536;
  --color-cold-brew-coffee-800: #5f4228;
  --color-cold-brew-coffee-900: #4b321b;
  --color-cold-brew-coffee-950: #301e0e;
  --color-fondant: #f9e2d2;
  --color-fondant-50: #fcefe6;
  --color-fondant-100: #f9e2d2;
  --color-fondant-200: #e2d0c4;
  --color-fondant-300: #cdbaad;
  --color-fondant-400: #b09b8d;
  --color-fondant-500: #958072;
  --color-fondant-600: #7a6759;
  --color-fondant-700: #635145;
  --color-fondant-800: #4e3f34;
  --color-fondant-900: #3d3027;
  --color-fondant-950: #261d16;
  --color-caramel-gold: #b98f6a;
  --color-caramel-gold-50: #ffefe1;
  --color-caramel-gold-100: #fee0c7;
  --color-caramel-gold-200: #edcaac;
  --color-caramel-gold-300: #d7b18f;
  --color-caramel-gold-400: #b98f6a;
  --color-caramel-gold-500: #9e7551;
  --color-caramel-gold-600: #835d3a;
  --color-caramel-gold-700: #6b4929;
  --color-caramel-gold-800: #56381c;
  --color-caramel-gold-900: #452b13;
  --color-caramel-gold-950: #2d1a09;
  --color-blushing-cinnamon: #f8be9a;
  --color-blushing-cinnamon-50: #ffe8db;
  --color-blushing-cinnamon-100: #ffd9c2;
  --color-blushing-cinnamon-200: #f8be9a;
  --color-blushing-cinnamon-300: #deab8c;
  --color-blushing-cinnamon-400: #c28d6b;
  --color-blushing-cinnamon-500: #a87351;
  --color-blushing-cinnamon-600: #8d5b3a;
  --color-blushing-cinnamon-700: #744729;
  --color-blushing-cinnamon-800: #5f371c;
  --color-blushing-cinnamon-900: #4b2912;
  --color-blushing-cinnamon-950: #301808;
  --color-moelleux-au-chocolat: #56320e;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #ffe6d2;
  --color-moelleux-au-chocolat-200: #f2d0b5;
  --color-moelleux-au-chocolat-300: #ddb798;
  --color-moelleux-au-chocolat-400: #bf9673;
  --color-moelleux-au-chocolat-500: #a27956;
  --color-moelleux-au-chocolat-600: #845e3c;
  --color-moelleux-au-chocolat-700: #694729;
  --color-moelleux-au-chocolat-800: #56320e;
  --color-moelleux-au-chocolat-900: #3f2711;
  --color-moelleux-au-chocolat-950: #281708;
}

Similar palettes