Silverfish to Tree of Life Color Palette

About this palette

Silverfish to Tree of Life is a 5-color muted palette: #8694A3 (Silverfish), #493A39 (Vibrant Vine), #DAEAFD (Cloudless), #97AF91 (Rooftop Garden), #53624F (Tree of Life). It mixes gray, white, green tones and feels cool overall. The strongest text pairing is #493A39 on #DAEAFD with a contrast ratio of 8.82:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silverfish	rgb(134, 148, 163)	hsl(211, 14%, 58%)
Vibrant Vine	rgb(73, 58, 57)	hsl(4, 12%, 25%)
Cloudless	rgb(218, 234, 253)	hsl(213, 90%, 92%)
Rooftop Garden	rgb(151, 175, 145)	hsl(108, 16%, 63%)
Tree of Life	rgb(83, 98, 79)	hsl(107, 11%, 35%)

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.

Aa8.82:1 Very good#493A39 on #DAEAFD
Aa8.82:1 Very good#DAEAFD on #493A39
Aa5.32:1 Good#DAEAFD on #53624F
Aa5.32:1 Good#53624F on #DAEAFD
Aa4.55:1 Good#493A39 on #97AF91
Aa4.55:1 Good#97AF91 on #493A39
Aa3.48:1 Poor#8694A3 on #493A39
Aa3.48:1 Poor#493A39 on #8694A3

Color blindness preview

CSS variables

/* Silverfish to Tree of Life — https://swatchly.xyz/palette/8694a3-493a39-daeafd-97af91-53624f */
:root {
  --silverfish: #8694a3;
  --vibrant-vine: #493a39;
  --cloudless: #daeafd;
  --rooftop-garden: #97af91;
  --tree-of-life: #53624f;
}

Tailwind CSS v4

/* Silverfish to Tree of Life — https://swatchly.xyz/palette/8694a3-493a39-daeafd-97af91-53624f */
@theme {
  --color-silverfish: #8694a3;
  --color-silverfish-50: #f2f8ff;
  --color-silverfish-100: #e8f1fa;
  --color-silverfish-200: #d5dfeb;
  --color-silverfish-300: #bfcbd8;
  --color-silverfish-400: #a0aebc;
  --color-silverfish-500: #8694a3;
  --color-silverfish-600: #6a7785;
  --color-silverfish-700: #525e6b;
  --color-silverfish-800: #3e4954;
  --color-silverfish-900: #2e3741;
  --color-silverfish-950: #1b2228;
  --color-vibrant-vine: #493a39;
  --color-vibrant-vine-50: #fdf2f1;
  --color-vibrant-vine-100: #f4e8e7;
  --color-vibrant-vine-200: #e2d4d3;
  --color-vibrant-vine-300: #ccbcbb;
  --color-vibrant-vine-400: #ad9b9a;
  --color-vibrant-vine-500: #907f7e;
  --color-vibrant-vine-600: #756463;
  --color-vibrant-vine-700: #5c4e4d;
  --color-vibrant-vine-800: #493a39;
  --color-vibrant-vine-900: #372d2c;
  --color-vibrant-vine-950: #221b1a;
  --color-cloudless: #daeafd;
  --color-cloudless-50: #ebf4ff;
  --color-cloudless-100: #daeafd;
  --color-cloudless-200: #cad6e4;
  --color-cloudless-300: #b3c0d0;
  --color-cloudless-400: #93a2b3;
  --color-cloudless-500: #788798;
  --color-cloudless-600: #5f6d7d;
  --color-cloudless-700: #4a5765;
  --color-cloudless-800: #394350;
  --color-cloudless-900: #2b343e;
  --color-cloudless-950: #192028;
  --color-rooftop-garden: #97af91;
  --color-rooftop-garden-50: #eefceb;
  --color-rooftop-garden-100: #e4f3e0;
  --color-rooftop-garden-200: #cfe1cb;
  --color-rooftop-garden-300: #b8cdb3;
  --color-rooftop-garden-400: #97af91;
  --color-rooftop-garden-500: #7b9275;
  --color-rooftop-garden-600: #60765b;
  --color-rooftop-garden-700: #4a5e45;
  --color-rooftop-garden-800: #384a34;
  --color-rooftop-garden-900: #2a3826;
  --color-rooftop-garden-950: #182315;
  --color-tree-of-life: #53624f;
  --color-tree-of-life-50: #eff9ec;
  --color-tree-of-life-100: #e4efe1;
  --color-tree-of-life-200: #d1ddcd;
  --color-tree-of-life-300: #bac9b7;
  --color-tree-of-life-400: #9bab97;
  --color-tree-of-life-500: #81917d;
  --color-tree-of-life-600: #687864;
  --color-tree-of-life-700: #53624f;
  --color-tree-of-life-800: #404d3d;
  --color-tree-of-life-900: #303b2e;
  --color-tree-of-life-950: #1d251b;
}