Italian Roast to Tree of Life Color Palette

About this palette

Italian Roast to Tree of Life is a 4-color dark, warm, gradient palette: #200A07 (Italian Roast), #2F1C00 (Close but No Cigar), #5E2D00 (Count Chocula), #5E5E48 (Tree of Life). It mixes black, brown, gray tones and feels warm overall. The strongest text pairing is #200A07 on #5E5E48 with a contrast ratio of 2.86:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Roast	rgb(32, 10, 7)	hsl(7, 64%, 8%)
Close but No Cigar	rgb(47, 28, 0)	hsl(36, 100%, 9%)
Count Chocula	rgb(94, 45, 0)	hsl(29, 100%, 18%)
Tree of Life	rgb(94, 94, 72)	hsl(60, 13%, 33%)

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.

Color blindness preview

CSS variables

/* Italian Roast to Tree of Life — https://swatchly.xyz/palette/200a07-2f1c00-5e2d00-5e5e48 */
:root {
  --italian-roast: #200a07;
  --close-but-no-cigar: #2f1c00;
  --count-chocula: #5e2d00;
  --tree-of-life: #5e5e48;
}

Tailwind CSS v4

/* Italian Roast to Tree of Life — https://swatchly.xyz/palette/200a07-2f1c00-5e2d00-5e5e48 */
@theme {
  --color-italian-roast: #200a07;
  --color-italian-roast-50: #fff2ef;
  --color-italian-roast-100: #fbe6e2;
  --color-italian-roast-200: #ead1cc;
  --color-italian-roast-300: #d6b9b4;
  --color-italian-roast-400: #b89994;
  --color-italian-roast-500: #997b75;
  --color-italian-roast-600: #7a5e59;
  --color-italian-roast-700: #5f4642;
  --color-italian-roast-800: #46322f;
  --color-italian-roast-900: #32221f;
  --color-italian-roast-950: #200a07;
  --color-close-but-no-cigar: #2f1c00;
  --color-close-but-no-cigar-50: #fff3e4;
  --color-close-but-no-cigar-100: #f9e9d4;
  --color-close-but-no-cigar-200: #e7d4bc;
  --color-close-but-no-cigar-300: #d3bda2;
  --color-close-but-no-cigar-400: #b59d7f;
  --color-close-but-no-cigar-500: #9a8264;
  --color-close-but-no-cigar-600: #7e684b;
  --color-close-but-no-cigar-700: #665237;
  --color-close-but-no-cigar-800: #514028;
  --color-close-but-no-cigar-900: #40311d;
  --color-close-but-no-cigar-950: #2f1c00;
  --color-count-chocula: #5e2d00;
  --color-count-chocula-50: #fff2ea;
  --color-count-chocula-100: #ffe6d5;
  --color-count-chocula-200: #facdaf;
  --color-count-chocula-300: #e7b391;
  --color-count-chocula-400: #c9916b;
  --color-count-chocula-500: #ac744e;
  --color-count-chocula-600: #8d5934;
  --color-count-chocula-700: #714321;
  --color-count-chocula-800: #5e2d00;
  --color-count-chocula-900: #45240b;
  --color-count-chocula-950: #2c1504;
  --color-tree-of-life: #5e5e48;
  --color-tree-of-life-50: #f6f6e8;
  --color-tree-of-life-100: #ececdd;
  --color-tree-of-life-200: #dadac8;
  --color-tree-of-life-300: #c5c5b0;
  --color-tree-of-life-400: #a7a790;
  --color-tree-of-life-500: #8d8d76;
  --color-tree-of-life-600: #74745d;
  --color-tree-of-life-700: #5e5e48;
  --color-tree-of-life-800: #494937;
  --color-tree-of-life-900: #383829;
  --color-tree-of-life-950: #232318;
}