Sunburst to Moelleux au Chocolat Color Palette

About this palette

Sunburst to Moelleux au Chocolat is a 4-color warm, earthy, monochromatic, gradient palette: #EFB379 (Sunburst), #CD7800 (Polished Bronze), #926209 (Embarrassed Frog), #4D3100 (Moelleux au Chocolat). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #EFB379 on #4D3100 with a contrast ratio of 6.49:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunburst	rgb(239, 179, 121)	hsl(29, 79%, 71%)
Polished Bronze	rgb(205, 120, 0)	hsl(35, 100%, 40%)
Embarrassed Frog	rgb(146, 98, 9)	hsl(39, 88%, 30%)
Moelleux au Chocolat	rgb(77, 49, 0)	hsl(38, 100%, 15%)

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.

Aa6.49:1 Good#EFB379 on #4D3100
Aa6.49:1 Good#4D3100 on #EFB379
Aa3.58:1 Poor#CD7800 on #4D3100
Aa3.58:1 Poor#4D3100 on #CD7800

Color blindness preview

CSS variables

/* Sunburst to Moelleux au Chocolat — https://swatchly.xyz/palette/efb379-cd7800-926209-4d3100 */
:root {
  --sunburst: #efb379;
  --polished-bronze: #cd7800;
  --embarrassed-frog: #926209;
  --moelleux-au-chocolat: #4d3100;
}

Tailwind CSS v4

/* Sunburst to Moelleux au Chocolat — https://swatchly.xyz/palette/efb379-cd7800-926209-4d3100 */
@theme {
  --color-sunburst: #efb379;
  --color-sunburst-50: #fff3e8;
  --color-sunburst-100: #ffe6d0;
  --color-sunburst-200: #fbcea3;
  --color-sunburst-300: #efb379;
  --color-sunburst-400: #cc945e;
  --color-sunburst-500: #b0783f;
  --color-sunburst-600: #935e24;
  --color-sunburst-700: #79480e;
  --color-sunburst-800: #613700;
  --color-sunburst-900: #4c2900;
  --color-sunburst-950: #311900;
  --color-polished-bronze: #cd7800;
  --color-polished-bronze-50: #fff5ec;
  --color-polished-bronze-100: #ffebd9;
  --color-polished-bronze-200: #ffd3ac;
  --color-polished-bronze-300: #ffb671;
  --color-polished-bronze-400: #e6943f;
  --color-polished-bronze-500: #cd7800;
  --color-polished-bronze-600: #a66000;
  --color-polished-bronze-700: #844b00;
  --color-polished-bronze-800: #683a00;
  --color-polished-bronze-900: #502b00;
  --color-polished-bronze-950: #331900;
  --color-embarrassed-frog: #926209;
  --color-embarrassed-frog-50: #fff3e4;
  --color-embarrassed-frog-100: #ffe8c9;
  --color-embarrassed-frog-200: #f8d19c;
  --color-embarrassed-frog-300: #e6b97c;
  --color-embarrassed-frog-400: #c99852;
  --color-embarrassed-frog-500: #ae7d30;
  --color-embarrassed-frog-600: #926209;
  --color-embarrassed-frog-700: #754d00;
  --color-embarrassed-frog-800: #5c3c00;
  --color-embarrassed-frog-900: #482d00;
  --color-embarrassed-frog-950: #2e1b00;
  --color-moelleux-au-chocolat: #4d3100;
  --color-moelleux-au-chocolat-50: #fff3e4;
  --color-moelleux-au-chocolat-100: #fde8cb;
  --color-moelleux-au-chocolat-200: #edd3b1;
  --color-moelleux-au-chocolat-300: #d9bc95;
  --color-moelleux-au-chocolat-400: #bc9d72;
  --color-moelleux-au-chocolat-500: #a28256;
  --color-moelleux-au-chocolat-600: #87683e;
  --color-moelleux-au-chocolat-700: #6f532b;
  --color-moelleux-au-chocolat-800: #5a411d;
  --color-moelleux-au-chocolat-900: #4d3100;
  --color-moelleux-au-chocolat-950: #2f2008;
}