Tree of Life to Antique Color Palette

About this palette

Tree of Life to Antique is a 5-color muted palette: #625C49 (Tree of Life), #DBBFC6 (Creamy Berry), #373F4F (Dark & Stormy), #86B7AC (Treetop), #8C8270 (Antique). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #DBBFC6 on #373F4F with a contrast ratio of 6.18:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tree of Life	rgb(98, 92, 73)	hsl(46, 15%, 34%)
Creamy Berry	rgb(219, 191, 198)	hsl(345, 28%, 80%)
Dark & Stormy	rgb(55, 63, 79)	hsl(220, 18%, 26%)
Treetop	rgb(134, 183, 172)	hsl(167, 25%, 62%)
Antique	rgb(140, 130, 112)	hsl(39, 11%, 49%)

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.18:1 Good#DBBFC6 on #373F4F
Aa6.18:1 Good#373F4F on #DBBFC6
Aa4.72:1 Good#373F4F on #86B7AC
Aa4.72:1 Good#86B7AC on #373F4F
Aa3.90:1 Poor#625C49 on #DBBFC6
Aa3.90:1 Poor#DBBFC6 on #625C49

Color blindness preview

CSS variables

/* Tree of Life to Antique — https://swatchly.xyz/palette/625c49-dbbfc6-373f4f-86b7ac-8c8270 */
:root {
  --tree-of-life: #625c49;
  --creamy-berry: #dbbfc6;
  --dark-stormy: #373f4f;
  --treetop: #86b7ac;
  --antique: #8c8270;
}

Tailwind CSS v4

/* Tree of Life to Antique — https://swatchly.xyz/palette/625c49-dbbfc6-373f4f-86b7ac-8c8270 */
@theme {
  --color-tree-of-life: #625c49;
  --color-tree-of-life-50: #f9f5e9;
  --color-tree-of-life-100: #efebdd;
  --color-tree-of-life-200: #ded9c9;
  --color-tree-of-life-300: #c9c3b1;
  --color-tree-of-life-400: #aba591;
  --color-tree-of-life-500: #918b77;
  --color-tree-of-life-600: #78725e;
  --color-tree-of-life-700: #625c49;
  --color-tree-of-life-800: #4d4838;
  --color-tree-of-life-900: #3b3729;
  --color-tree-of-life-950: #252218;
  --color-creamy-berry: #dbbfc6;
  --color-creamy-berry-50: #fff6f8;
  --color-creamy-berry-100: #fcebef;
  --color-creamy-berry-200: #ebd7dc;
  --color-creamy-berry-300: #dbbfc6;
  --color-creamy-berry-400: #b99fa5;
  --color-creamy-berry-500: #9c8289;
  --color-creamy-berry-600: #80676d;
  --color-creamy-berry-700: #665056;
  --color-creamy-berry-800: #503d42;
  --color-creamy-berry-900: #3e2e32;
  --color-creamy-berry-950: #271c1f;
  --color-dark-stormy: #373f4f;
  --color-dark-stormy-50: #f0f5ff;
  --color-dark-stormy-100: #e5ebf8;
  --color-dark-stormy-200: #d0d8e7;
  --color-dark-stormy-300: #b8c0d1;
  --color-dark-stormy-400: #97a0b3;
  --color-dark-stormy-500: #7b8497;
  --color-dark-stormy-600: #61697b;
  --color-dark-stormy-700: #4b5262;
  --color-dark-stormy-800: #373f4f;
  --color-dark-stormy-900: #2b303b;
  --color-dark-stormy-950: #191d25;
  --color-treetop: #86b7ac;
  --color-treetop-50: #e6fff9;
  --color-treetop-100: #dbf8f1;
  --color-treetop-200: #c4e7df;
  --color-treetop-300: #abd3ca;
  --color-treetop-400: #86b7ac;
  --color-treetop-500: #69998f;
  --color-treetop-600: #4e7c73;
  --color-treetop-700: #38635a;
  --color-treetop-800: #274d46;
  --color-treetop-900: #1a3b35;
  --color-treetop-950: #0d2420;
  --color-antique: #8c8270;
  --color-antique-50: #faf4e9;
  --color-antique-100: #f0e9dd;
  --color-antique-200: #ddd5c6;
  --color-antique-300: #c7bead;
  --color-antique-400: #a89e8c;
  --color-antique-500: #8c8270;
  --color-antique-600: #726857;
  --color-antique-700: #5b5243;
  --color-antique-800: #474033;
  --color-antique-900: #373126;
  --color-antique-950: #231e16;
}