Persian Melon to Moelleux au Chocolat color palette

FFDDC3Persian Melon E1A67ELunatic Lynx C26600Fire Ant 76512AChocolate Bells 562E05Moelleux au Chocolat

Open in generator Export PNG, PDF, ASE…

About this palette

Persian Melon to Moelleux au Chocolat is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #FFDDC3 (Persian Melon), #E1A67E (Lunatic Lynx), #C26600 (Fire Ant), #76512A (Chocolate Bells), #562E05 (Moelleux au Chocolat). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FFDDC3 on #562E05 with a contrast ratio of 9.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Persian Melon	rgb(255, 221, 195)	hsl(26, 100%, 88%)
Lunatic Lynx	rgb(225, 166, 126)	hsl(24, 62%, 69%)
Fire Ant	rgb(194, 102, 0)	hsl(32, 100%, 38%)
Chocolate Bells	rgb(118, 81, 42)	hsl(31, 48%, 31%)
Moelleux au Chocolat	rgb(86, 46, 5)	hsl(30, 89%, 18%)

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.16:1 Very good#FFDDC3 on #562E05
Aa9.16:1 Very good#562E05 on #FFDDC3
Aa5.57:1 Good#E1A67E on #562E05
Aa5.57:1 Good#562E05 on #E1A67E
Aa5.50:1 Good#FFDDC3 on #76512A
Aa5.50:1 Good#76512A on #FFDDC3
Aa3.34:1 Poor#E1A67E on #76512A
Aa3.34:1 Poor#76512A on #E1A67E

Color blindness preview

CSS variables

/* Persian Melon to Moelleux au Chocolat — https://swatchly.xyz/palette/ffddc3-e1a67e-c26600-76512a-562e05 */
:root {
  --persian-melon: #ffddc3;
  --lunatic-lynx: #e1a67e;
  --fire-ant: #c26600;
  --chocolate-bells: #76512a;
  --moelleux-au-chocolat: #562e05;
}

Tailwind CSS v4

/* Persian Melon to Moelleux au Chocolat — https://swatchly.xyz/palette/ffddc3-e1a67e-c26600-76512a-562e05 */
@theme {
  --color-persian-melon: #ffddc3;
  --color-persian-melon-50: #ffebdc;
  --color-persian-melon-100: #ffddc3;
  --color-persian-melon-200: #e6ccb9;
  --color-persian-melon-300: #d3b6a0;
  --color-persian-melon-400: #b69780;
  --color-persian-melon-500: #9c7d65;
  --color-persian-melon-600: #81644d;
  --color-persian-melon-700: #694f3a;
  --color-persian-melon-800: #543d2b;
  --color-persian-melon-900: #412e1f;
  --color-persian-melon-950: #2a1c11;
  --color-lunatic-lynx: #e1a67e;
  --color-lunatic-lynx-50: #ffeadd;
  --color-lunatic-lynx-100: #ffdac3;
  --color-lunatic-lynx-200: #f2c2a2;
  --color-lunatic-lynx-300: #e1a67e;
  --color-lunatic-lynx-400: #c18963;
  --color-lunatic-lynx-500: #a77049;
  --color-lunatic-lynx-600: #8c5833;
  --color-lunatic-lynx-700: #734522;
  --color-lunatic-lynx-800: #5e3516;
  --color-lunatic-lynx-900: #4c290d;
  --color-lunatic-lynx-950: #311805;
  --color-fire-ant: #c26600;
  --color-fire-ant-50: #fff1e8;
  --color-fire-ant-100: #ffe4d1;
  --color-fire-ant-200: #ffc8a2;
  --color-fire-ant-300: #fca768;
  --color-fire-ant-400: #df8438;
  --color-fire-ant-500: #c26600;
  --color-fire-ant-600: #9d5100;
  --color-fire-ant-700: #7e4000;
  --color-fire-ant-800: #633100;
  --color-fire-ant-900: #4e2500;
  --color-fire-ant-950: #331600;
  --color-chocolate-bells: #76512a;
  --color-chocolate-bells-50: #fff3e7;
  --color-chocolate-bells-100: #ffe6cf;
  --color-chocolate-bells-200: #f2d2b3;
  --color-chocolate-bells-300: #dfbb99;
  --color-chocolate-bells-400: #c39c75;
  --color-chocolate-bells-500: #a88159;
  --color-chocolate-bells-600: #8d6740;
  --color-chocolate-bells-700: #76512a;
  --color-chocolate-bells-800: #5d3f1e;
  --color-chocolate-bells-900: #492f13;
  --color-chocolate-bells-950: #2f1d08;
  --color-moelleux-au-chocolat: #562e05;
  --color-moelleux-au-chocolat-50: #fff3e9;
  --color-moelleux-au-chocolat-100: #ffe6d3;
  --color-moelleux-au-chocolat-200: #f5cfb2;
  --color-moelleux-au-chocolat-300: #e2b797;
  --color-moelleux-au-chocolat-400: #c69874;
  --color-moelleux-au-chocolat-500: #ac7e59;
  --color-moelleux-au-chocolat-600: #916540;
  --color-moelleux-au-chocolat-700: #78502e;
  --color-moelleux-au-chocolat-800: #633f20;
  --color-moelleux-au-chocolat-900: #562e05;
  --color-moelleux-au-chocolat-950: #351e0a;
}