Snow White to Swamp Thing Color Palette

About this palette

Snow White to Swamp Thing is a 5-color muted, cool, earthy, gradient palette: #E8FFF3 (Snow White), #A5BDAB (Meadow Morn), #6D8D7A (Toad), #3F5B4D (Plantation), #182C22 (Swamp Thing). It mixes white, green, gray tones and feels cool overall. The strongest text pairing is #E8FFF3 on #182C22 with a contrast ratio of 14.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Snow White	rgb(232, 255, 243)	hsl(149, 100%, 95%)
Meadow Morn	rgb(165, 189, 171)	hsl(135, 15%, 69%)
Toad	rgb(109, 141, 122)	hsl(144, 13%, 49%)
Plantation	rgb(63, 91, 77)	hsl(150, 18%, 30%)
Swamp Thing	rgb(24, 44, 34)	hsl(150, 29%, 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.

Aa14.08:1 Super#E8FFF3 on #182C22
Aa14.08:1 Super#182C22 on #E8FFF3
Aa7.36:1 Very good#A5BDAB on #182C22
Aa7.36:1 Very good#182C22 on #A5BDAB
Aa7.12:1 Very good#E8FFF3 on #3F5B4D
Aa7.12:1 Very good#3F5B4D on #E8FFF3
Aa4.04:1 Poor#6D8D7A on #182C22
Aa4.04:1 Poor#182C22 on #6D8D7A

Color blindness preview

CSS variables

/* Snow White to Swamp Thing — https://swatchly.xyz/palette/e8fff3-a5bdab-6d8d7a-3f5b4d-182c22 */
:root {
  --snow-white: #e8fff3;
  --meadow-morn: #a5bdab;
  --toad: #6d8d7a;
  --plantation: #3f5b4d;
  --swamp-thing: #182c22;
}

Tailwind CSS v4

/* Snow White to Swamp Thing — https://swatchly.xyz/palette/e8fff3-a5bdab-6d8d7a-3f5b4d-182c22 */
@theme {
  --color-snow-white: #e8fff3;
  --color-snow-white-50: #e8fff3;
  --color-snow-white-100: #e4f2eb;
  --color-snow-white-200: #ceded6;
  --color-snow-white-300: #b5c8be;
  --color-snow-white-400: #94a89e;
  --color-snow-white-500: #788c82;
  --color-snow-white-600: #5d7167;
  --color-snow-white-700: #485a51;
  --color-snow-white-800: #37473f;
  --color-snow-white-900: #293630;
  --color-snow-white-950: #18221d;
  --color-meadow-morn: #a5bdab;
  --color-meadow-morn-50: #e5f4e9;
  --color-meadow-morn-100: #d8e9dc;
  --color-meadow-morn-200: #c1d4c5;
  --color-meadow-morn-300: #a5bdab;
  --color-meadow-morn-400: #899f8e;
  --color-meadow-morn-500: #6f8675;
  --color-meadow-morn-600: #586d5d;
  --color-meadow-morn-700: #445849;
  --color-meadow-morn-800: #354639;
  --color-meadow-morn-900: #28372c;
  --color-meadow-morn-950: #18221b;
  --color-toad: #6d8d7a;
  --color-toad-50: #e7faef;
  --color-toad-100: #dbf1e3;
  --color-toad-200: #c4dece;
  --color-toad-300: #abc8b6;
  --color-toad-400: #89a996;
  --color-toad-500: #6d8d7a;
  --color-toad-600: #547261;
  --color-toad-700: #405b4b;
  --color-toad-800: #30483a;
  --color-toad-900: #23382c;
  --color-toad-950: #14231a;
  --color-plantation: #3f5b4d;
  --color-plantation-50: #e9faf1;
  --color-plantation-100: #ddf1e6;
  --color-plantation-200: #c6ded1;
  --color-plantation-300: #adc8ba;
  --color-plantation-400: #8ba999;
  --color-plantation-500: #6f8d7e;
  --color-plantation-600: #567264;
  --color-plantation-700: #3f5b4d;
  --color-plantation-800: #31473c;
  --color-plantation-900: #24372d;
  --color-plantation-950: #14221b;
  --color-swamp-thing: #182c22;
  --color-swamp-thing-50: #ebf9f1;
  --color-swamp-thing-100: #e0f0e7;
  --color-swamp-thing-200: #caddd3;
  --color-swamp-thing-300: #b2c7bb;
  --color-swamp-thing-400: #91a89b;
  --color-swamp-thing-500: #778e82;
  --color-swamp-thing-600: #5f7569;
  --color-swamp-thing-700: #4b5f54;
  --color-swamp-thing-800: #3b4d43;
  --color-swamp-thing-900: #2e3e36;
  --color-swamp-thing-950: #182c22;
}