Swamp Thing to Petite Pink Color Palette

About this palette

Swamp Thing to Petite Pink is a 5-color muted palette: #1B2C24 (Swamp Thing), #69494D (Liver), #6F9586 (Yucca), #86B3C6 (Crystal Lake), #E6CDCA (Petite Pink). It mixes gray, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #1B2C24 on #E6CDCA with a contrast ratio of 9.74:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(27, 44, 36)	hsl(152, 24%, 14%)
Liver	rgb(105, 73, 77)	hsl(352, 18%, 35%)
Yucca	rgb(111, 149, 134)	hsl(156, 15%, 51%)
Crystal Lake	rgb(134, 179, 198)	hsl(198, 36%, 65%)
Petite Pink	rgb(230, 205, 202)	hsl(6, 36%, 85%)

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.

Aa9.74:1 Very good#1B2C24 on #E6CDCA
Aa9.74:1 Very good#E6CDCA on #1B2C24
Aa6.48:1 Good#1B2C24 on #86B3C6
Aa6.48:1 Good#86B3C6 on #1B2C24
Aa5.24:1 Good#69494D on #E6CDCA
Aa5.24:1 Good#E6CDCA on #69494D
Aa4.41:1 Poor#1B2C24 on #6F9586
Aa4.41:1 Poor#6F9586 on #1B2C24

Color blindness preview

CSS variables

/* Swamp Thing to Petite Pink — https://swatchly.xyz/palette/1b2c24-69494d-6f9586-86b3c6-e6cdca */
:root {
  --swamp-thing: #1b2c24;
  --liver: #69494d;
  --yucca: #6f9586;
  --crystal-lake: #86b3c6;
  --petite-pink: #e6cdca;
}

Tailwind CSS v4

/* Swamp Thing to Petite Pink — https://swatchly.xyz/palette/1b2c24-69494d-6f9586-86b3c6-e6cdca */
@theme {
  --color-swamp-thing: #1b2c24;
  --color-swamp-thing-50: #edf8f2;
  --color-swamp-thing-100: #e2efe8;
  --color-swamp-thing-200: #ccdcd4;
  --color-swamp-thing-300: #b4c6bd;
  --color-swamp-thing-400: #93a79d;
  --color-swamp-thing-500: #7a8d83;
  --color-swamp-thing-600: #61746b;
  --color-swamp-thing-700: #4d5f56;
  --color-swamp-thing-800: #3d4d45;
  --color-swamp-thing-900: #303e37;
  --color-swamp-thing-950: #1b2c24;
  --color-liver: #69494d;
  --color-liver-50: #fff1f3;
  --color-liver-100: #fde4e7;
  --color-liver-200: #eccfd2;
  --color-liver-300: #d7b7ba;
  --color-liver-400: #b9969a;
  --color-liver-500: #9d7a7e;
  --color-liver-600: #816064;
  --color-liver-700: #69494d;
  --color-liver-800: #52393c;
  --color-liver-900: #402b2d;
  --color-liver-950: #29191b;
  --color-yucca: #6f9586;
  --color-yucca-50: #e6fcf3;
  --color-yucca-100: #dbf4e9;
  --color-yucca-200: #c5e2d6;
  --color-yucca-300: #accdc0;
  --color-yucca-400: #8bb0a1;
  --color-yucca-500: #6f9586;
  --color-yucca-600: #54796b;
  --color-yucca-700: #3f6154;
  --color-yucca-800: #2e4c41;
  --color-yucca-900: #213a31;
  --color-yucca-950: #12241e;
  --color-crystal-lake: #86b3c6;
  --color-crystal-lake-50: #f0fbff;
  --color-crystal-lake-100: #ddf5ff;
  --color-crystal-lake-200: #c4e4f2;
  --color-crystal-lake-300: #abd0e0;
  --color-crystal-lake-400: #86b3c6;
  --color-crystal-lake-500: #6a95a8;
  --color-crystal-lake-600: #4e798a;
  --color-crystal-lake-700: #386070;
  --color-crystal-lake-800: #274a58;
  --color-crystal-lake-900: #1b3944;
  --color-crystal-lake-950: #0d222b;
  --color-petite-pink: #e6cdca;
  --color-petite-pink-50: #fdefed;
  --color-petite-pink-100: #f4e4e2;
  --color-petite-pink-200: #e6cdca;
  --color-petite-pink-300: #cdb8b6;
  --color-petite-pink-400: #b09996;
  --color-petite-pink-500: #957e7c;
  --color-petite-pink-600: #7a6562;
  --color-petite-pink-700: #634f4d;
  --color-petite-pink-800: #4e3e3c;
  --color-petite-pink-900: #3d2f2d;
  --color-petite-pink-950: #271c1b;
}