Tree of Life to Tropical Fog Color Palette

About this palette

Tree of Life to Tropical Fog is a 5-color muted palette: #615B3E (Tree of Life), #948661 (Wilderness), #F3ECD5 (Rum Swizzle), #383427 (Graphite), #D2CAB3 (Tropical Fog). It mixes brown, yellow, white, gray tones and feels warm overall. The strongest text pairing is #F3ECD5 on #383427 with a contrast ratio of 10.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tree of Life	rgb(97, 91, 62)	hsl(50, 22%, 31%)
Wilderness	rgb(148, 134, 97)	hsl(44, 21%, 48%)
Rum Swizzle	rgb(243, 236, 213)	hsl(46, 56%, 89%)
Graphite	rgb(56, 52, 39)	hsl(46, 18%, 19%)
Tropical Fog	rgb(210, 202, 179)	hsl(45, 26%, 76%)

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.52:1 Very good#F3ECD5 on #383427
Aa10.52:1 Very good#383427 on #F3ECD5
Aa7.60:1 Very good#383427 on #D2CAB3
Aa7.60:1 Very good#D2CAB3 on #383427
Aa5.78:1 Good#615B3E on #F3ECD5
Aa5.78:1 Good#F3ECD5 on #615B3E
Aa4.18:1 Poor#615B3E on #D2CAB3
Aa4.18:1 Poor#D2CAB3 on #615B3E

Color blindness preview

CSS variables

/* Tree of Life to Tropical Fog — https://swatchly.xyz/palette/615b3e-948661-f3ecd5-383427-d2cab3 */
:root {
  --tree-of-life: #615b3e;
  --wilderness: #948661;
  --rum-swizzle: #f3ecd5;
  --graphite: #383427;
  --tropical-fog: #d2cab3;
}

Tailwind CSS v4

/* Tree of Life to Tropical Fog — https://swatchly.xyz/palette/615b3e-948661-f3ecd5-383427-d2cab3 */
@theme {
  --color-tree-of-life: #615b3e;
  --color-tree-of-life-50: #f9f6e3;
  --color-tree-of-life-100: #f0ecd7;
  --color-tree-of-life-200: #ded9c1;
  --color-tree-of-life-300: #c9c4a8;
  --color-tree-of-life-400: #aba587;
  --color-tree-of-life-500: #918b6c;
  --color-tree-of-life-600: #777153;
  --color-tree-of-life-700: #615b3e;
  --color-tree-of-life-800: #4c472f;
  --color-tree-of-life-900: #3b3622;
  --color-tree-of-life-950: #252213;
  --color-wilderness: #948661;
  --color-wilderness-50: #fdf5df;
  --color-wilderness-100: #f4ebd3;
  --color-wilderness-200: #e2d7ba;
  --color-wilderness-300: #cdc1a0;
  --color-wilderness-400: #afa17d;
  --color-wilderness-500: #948661;
  --color-wilderness-600: #796b48;
  --color-wilderness-700: #615534;
  --color-wilderness-800: #4c4225;
  --color-wilderness-900: #3b321a;
  --color-wilderness-950: #251f0d;
  --color-rum-swizzle: #f3ecd5;
  --color-rum-swizzle-50: #faf6e9;
  --color-rum-swizzle-100: #f3ecd5;
  --color-rum-swizzle-200: #ddd8c8;
  --color-rum-swizzle-300: #c7c1af;
  --color-rum-swizzle-400: #a8a28d;
  --color-rum-swizzle-500: #8d8671;
  --color-rum-swizzle-600: #726c58;
  --color-rum-swizzle-700: #5b5543;
  --color-rum-swizzle-800: #474233;
  --color-rum-swizzle-900: #373325;
  --color-rum-swizzle-950: #221f16;
  --color-graphite: #383427;
  --color-graphite-50: #f8f5ec;
  --color-graphite-100: #eeebe1;
  --color-graphite-200: #dbd7cb;
  --color-graphite-300: #c5c1b3;
  --color-graphite-400: #a6a293;
  --color-graphite-500: #8b8778;
  --color-graphite-600: #716c5e;
  --color-graphite-700: #5a5649;
  --color-graphite-800: #474338;
  --color-graphite-900: #383427;
  --color-graphite-950: #222019;
  --color-tropical-fog: #d2cab3;
  --color-tropical-fog-50: #fefaee;
  --color-tropical-fog-100: #f6f1e4;
  --color-tropical-fog-200: #e5dfcf;
  --color-tropical-fog-300: #d2cab3;
  --color-tropical-fog-400: #b0a994;
  --color-tropical-fog-500: #938c76;
  --color-tropical-fog-600: #77705b;
  --color-tropical-fog-700: #5e5845;
  --color-tropical-fog-800: #494333;
  --color-tropical-fog-900: #373325;
  --color-tropical-fog-950: #221f15;
}