Soufflé to Medium Roast Color Palette

About this palette

Soufflé to Medium Roast is a 5-color warm, earthy, vintage, gradient palette: #EACEA3 (Soufflé), #DE734B (Jaffa), #AE5150 (Hot Sauce), #6E3938 (Hot Chocolate), #3B1D08 (Medium Roast). It mixes yellow, orange, red, brown tones and feels warm overall. The strongest text pairing is #EACEA3 on #3B1D08 with a contrast ratio of 10.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soufflé	rgb(234, 206, 163)	hsl(36, 63%, 78%)
Jaffa	rgb(222, 115, 75)	hsl(16, 69%, 58%)
Hot Sauce	rgb(174, 81, 80)	hsl(1, 37%, 50%)
Hot Chocolate	rgb(110, 57, 56)	hsl(1, 33%, 33%)
Medium Roast	rgb(59, 29, 8)	hsl(25, 76%, 13%)

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.

Aa10.15:1 Very good#EACEA3 on #3B1D08
Aa10.15:1 Very good#3B1D08 on #EACEA3
Aa6.01:1 Good#EACEA3 on #6E3938
Aa6.01:1 Good#6E3938 on #EACEA3
Aa4.88:1 Good#DE734B on #3B1D08
Aa4.88:1 Good#3B1D08 on #DE734B
Aa3.39:1 Poor#EACEA3 on #AE5150
Aa3.39:1 Poor#AE5150 on #EACEA3

Color blindness preview

CSS variables

/* Soufflé to Medium Roast — https://swatchly.xyz/palette/eacea3-de734b-ae5150-6e3938-3b1d08 */
:root {
  --souffl: #eacea3;
  --jaffa: #de734b;
  --hot-sauce: #ae5150;
  --hot-chocolate: #6e3938;
  --medium-roast: #3b1d08;
}

Tailwind CSS v4

/* Soufflé to Medium Roast — https://swatchly.xyz/palette/eacea3-de734b-ae5150-6e3938-3b1d08 */
@theme {
  --color-souffl: #eacea3;
  --color-souffl-50: #ffefd8;
  --color-souffl-100: #f7e4c8;
  --color-souffl-200: #eacea3;
  --color-souffl-300: #d1b994;
  --color-souffl-400: #b49a72;
  --color-souffl-500: #997f57;
  --color-souffl-600: #7e663f;
  --color-souffl-700: #67502d;
  --color-souffl-800: #523f1f;
  --color-souffl-900: #403014;
  --color-souffl-950: #291d09;
  --color-jaffa: #de734b;
  --color-jaffa-50: #ffece6;
  --color-jaffa-100: #ffdcd0;
  --color-jaffa-200: #ffbda6;
  --color-jaffa-300: #fc9975;
  --color-jaffa-400: #de734b;
  --color-jaffa-500: #c15931;
  --color-jaffa-600: #a44118;
  --color-jaffa-700: #882f03;
  --color-jaffa-800: #6e2300;
  --color-jaffa-900: #581a00;
  --color-jaffa-950: #3b0e00;
  --color-hot-sauce: #ae5150;
  --color-hot-sauce-50: #fff2f1;
  --color-hot-sauce-100: #ffe5e4;
  --color-hot-sauce-200: #ffcbc8;
  --color-hot-sauce-300: #ffaaa6;
  --color-hot-sauce-400: #e68784;
  --color-hot-sauce-500: #cb6b69;
  --color-hot-sauce-600: #ae5150;
  --color-hot-sauce-700: #903b3b;
  --color-hot-sauce-800: #742a2b;
  --color-hot-sauce-900: #5c1d1e;
  --color-hot-sauce-950: #3d0f10;
  --color-hot-chocolate: #6e3938;
  --color-hot-chocolate-50: #fff2f1;
  --color-hot-chocolate-100: #ffe4e2;
  --color-hot-chocolate-200: #facac7;
  --color-hot-chocolate-300: #e9b3b0;
  --color-hot-chocolate-400: #ce9391;
  --color-hot-chocolate-500: #b47976;
  --color-hot-chocolate-600: #99605e;
  --color-hot-chocolate-700: #804c4a;
  --color-hot-chocolate-800: #6e3938;
  --color-hot-chocolate-900: #542c2b;
  --color-hot-chocolate-950: #381a1a;
  --color-medium-roast: #3b1d08;
  --color-medium-roast-50: #fff2eb;
  --color-medium-roast-100: #ffe5d6;
  --color-medium-roast-200: #efd1bf;
  --color-medium-roast-300: #dbb9a5;
  --color-medium-roast-400: #be9982;
  --color-medium-roast-500: #a47e68;
  --color-medium-roast-600: #896650;
  --color-medium-roast-700: #71513d;
  --color-medium-roast-800: #5d402e;
  --color-medium-roast-900: #4b3223;
  --color-medium-roast-950: #3b1d08;
}