Start generating

Pandora’s Box to Moelleux au Chocolat color palette

FFDCB4Pandora’s BoxF4B051Deep FriedCE8600Chicken MasalaAD720BCookie Dough7F4B00Milk Chocolate553100Moelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Pandora’s Box to Moelleux au Chocolat is a 6-color warm, earthy, monochromatic, gradient palette: #FFDCB4 (Pandora’s Box), #F4B051 (Deep Fried), #CE8600 (Chicken Masala), #AD720B (Cookie Dough), #7F4B00 (Milk Chocolate), #553100 (Moelleux au Chocolat). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FFDCB4 on #553100 with a contrast ratio of 8.85:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pandora’s Boxrgb(255, 220, 180)hsl(32, 100%, 85%)
Deep Friedrgb(244, 176, 81)hsl(35, 88%, 64%)
Chicken Masalargb(206, 134, 0)hsl(39, 100%, 40%)
Cookie Doughrgb(173, 114, 11)hsl(38, 88%, 36%)
Milk Chocolatergb(127, 75, 0)hsl(35, 100%, 25%)
Moelleux au Chocolatrgb(85, 49, 0)hsl(35, 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.

  • Aa8.85:1 Very good#FFDCB4 on #553100
  • Aa8.85:1 Very good#553100 on #FFDCB4
  • Aa6.12:1 Good#F4B051 on #553100
  • Aa6.12:1 Good#553100 on #F4B051
  • Aa5.55:1 Good#FFDCB4 on #7F4B00
  • Aa5.55:1 Good#7F4B00 on #FFDCB4
  • Aa3.85:1 Poor#CE8600 on #553100
  • Aa3.85:1 Poor#553100 on #CE8600

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pandora’s Box to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdcb4-f4b051-ce8600-ad720b-7f4b00-553100 */
:root {
  --pandora-s-box: #ffdcb4;
  --deep-fried: #f4b051;
  --chicken-masala: #ce8600;
  --cookie-dough: #ad720b;
  --milk-chocolate: #7f4b00;
  --moelleux-au-chocolat: #553100;
}

Tailwind CSS v4

/* Pandora’s Box to Moelleux au Chocolat — https://swatchly.xyz/palette/ffdcb4-f4b051-ce8600-ad720b-7f4b00-553100 */
@theme {
  --color-pandora-s-box: #ffdcb4;
  --color-pandora-s-box-50: #ffead3;
  --color-pandora-s-box-100: #ffdcb4;
  --color-pandora-s-box-200: #e6cbad;
  --color-pandora-s-box-300: #d3b694;
  --color-pandora-s-box-400: #b79773;
  --color-pandora-s-box-500: #9d7d58;
  --color-pandora-s-box-600: #826440;
  --color-pandora-s-box-700: #6b4f2e;
  --color-pandora-s-box-800: #553d20;
  --color-pandora-s-box-900: #422e15;
  --color-pandora-s-box-950: #2a1c0a;
  --color-deep-fried: #f4b051;
  --color-deep-fried-50: #fff2e2;
  --color-deep-fried-100: #ffe5c6;
  --color-deep-fried-200: #ffcc8a;
  --color-deep-fried-300: #f4b051;
  --color-deep-fried-400: #d19134;
  --color-deep-fried-500: #b47600;
  --color-deep-fried-600: #925f00;
  --color-deep-fried-700: #744b00;
  --color-deep-fried-800: #5c3a00;
  --color-deep-fried-900: #482c00;
  --color-deep-fried-950: #2e1b00;
  --color-chicken-masala: #ce8600;
  --color-chicken-masala-50: #ffefdc;
  --color-chicken-masala-100: #ffe0bc;
  --color-chicken-masala-200: #ffc47a;
  --color-chicken-masala-300: #ebaa52;
  --color-chicken-masala-400: #ce8600;
  --color-chicken-masala-500: #ac6f00;
  --color-chicken-masala-600: #8c5900;
  --color-chicken-masala-700: #704700;
  --color-chicken-masala-800: #593700;
  --color-chicken-masala-900: #462b00;
  --color-chicken-masala-950: #2e1a00;
  --color-cookie-dough: #ad720b;
  --color-cookie-dough-50: #fff2e2;
  --color-cookie-dough-100: #ffe4c4;
  --color-cookie-dough-200: #fbcb8e;
  --color-cookie-dough-300: #e8b16a;
  --color-cookie-dough-400: #ca8f3b;
  --color-cookie-dough-500: #ad720b;
  --color-cookie-dough-600: #8d5b00;
  --color-cookie-dough-700: #704800;
  --color-cookie-dough-800: #593800;
  --color-cookie-dough-900: #462b00;
  --color-cookie-dough-950: #2d1a00;
  --color-milk-chocolate: #7f4b00;
  --color-milk-chocolate-50: #fff3e7;
  --color-milk-chocolate-100: #ffe6cf;
  --color-milk-chocolate-200: #fbcfa3;
  --color-milk-chocolate-300: #eab785;
  --color-milk-chocolate-400: #ce975e;
  --color-milk-chocolate-500: #b37b40;
  --color-milk-chocolate-600: #976224;
  --color-milk-chocolate-700: #7f4b00;
  --color-milk-chocolate-800: #643a00;
  --color-milk-chocolate-900: #4e2c00;
  --color-milk-chocolate-950: #321a00;
  --color-moelleux-au-chocolat: #553100;
  --color-moelleux-au-chocolat-50: #fff3e7;
  --color-moelleux-au-chocolat-100: #ffe6ce;
  --color-moelleux-au-chocolat-200: #f2d1b0;
  --color-moelleux-au-chocolat-300: #ddb892;
  --color-moelleux-au-chocolat-400: #bf966c;
  --color-moelleux-au-chocolat-500: #a1794e;
  --color-moelleux-au-chocolat-600: #835d34;
  --color-moelleux-au-chocolat-700: #684621;
  --color-moelleux-au-chocolat-800: #553100;
  --color-moelleux-au-chocolat-900: #3e270b;
  --color-moelleux-au-chocolat-950: #271604;
}

Similar palettes