Swamp Thing to Pi Color Palette

About this palette

Swamp Thing to Pi is a 5-color muted palette: #1A2C27 (Swamp Thing), #567F70 (Ecological), #F6E0E7 (Pork Belly), #B9A790 (Oakwood), #324155 (Pi). It mixes gray, turquoise, orange, blue tones and feels cool overall. The strongest text pairing is #1A2C27 on #F6E0E7 with a contrast ratio of 11.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(26, 44, 39)	hsl(163, 26%, 14%)
Ecological	rgb(86, 127, 112)	hsl(158, 19%, 42%)
Pork Belly	rgb(246, 224, 231)	hsl(341, 55%, 92%)
Oakwood	rgb(185, 167, 144)	hsl(34, 23%, 65%)
Pi	rgb(50, 65, 85)	hsl(214, 26%, 26%)

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.

Aa11.67:1 Very good#1A2C27 on #F6E0E7
Aa11.67:1 Very good#F6E0E7 on #1A2C27
Aa8.27:1 Very good#F6E0E7 on #324155
Aa8.27:1 Very good#324155 on #F6E0E7
Aa6.27:1 Good#1A2C27 on #B9A790
Aa6.27:1 Good#B9A790 on #1A2C27
Aa4.45:1 Poor#B9A790 on #324155
Aa4.45:1 Poor#324155 on #B9A790

Color blindness preview

CSS variables

/* Swamp Thing to Pi — https://swatchly.xyz/palette/1a2c27-567f70-f6e0e7-b9a790-324155 */
:root {
  --swamp-thing: #1a2c27;
  --ecological: #567f70;
  --pork-belly: #f6e0e7;
  --oakwood: #b9a790;
  --pi: #324155;
}

Tailwind CSS v4

/* Swamp Thing to Pi — https://swatchly.xyz/palette/1a2c27-567f70-f6e0e7-b9a790-324155 */
@theme {
  --color-swamp-thing: #1a2c27;
  --color-swamp-thing-50: #ecf8f4;
  --color-swamp-thing-100: #e1efea;
  --color-swamp-thing-200: #cbdcd7;
  --color-swamp-thing-300: #b3c6c0;
  --color-swamp-thing-400: #92a7a0;
  --color-swamp-thing-500: #798d87;
  --color-swamp-thing-600: #60746e;
  --color-swamp-thing-700: #4d5f59;
  --color-swamp-thing-800: #3c4d48;
  --color-swamp-thing-900: #303e3a;
  --color-swamp-thing-950: #1a2c27;
  --color-ecological: #567f70;
  --color-ecological-50: #e4fcf2;
  --color-ecological-100: #daf4e9;
  --color-ecological-200: #c4e3d7;
  --color-ecological-300: #accfc1;
  --color-ecological-400: #8ab2a3;
  --color-ecological-500: #6f9989;
  --color-ecological-600: #567f70;
  --color-ecological-700: #406658;
  --color-ecological-800: #2e5044;
  --color-ecological-900: #213e34;
  --color-ecological-950: #12271f;
  --color-pork-belly: #f6e0e7;
  --color-pork-belly-50: #faedf1;
  --color-pork-belly-100: #f6e0e7;
  --color-pork-belly-200: #dfcfd4;
  --color-pork-belly-300: #cbb8be;
  --color-pork-belly-400: #ad99a0;
  --color-pork-belly-500: #927f85;
  --color-pork-belly-600: #78656b;
  --color-pork-belly-700: #615056;
  --color-pork-belly-800: #4c3e43;
  --color-pork-belly-900: #3b2f33;
  --color-pork-belly-950: #251c1f;
  --color-oakwood: #b9a790;
  --color-oakwood-50: #fff7ed;
  --color-oakwood-100: #f9eee0;
  --color-oakwood-200: #e9dbca;
  --color-oakwood-300: #d5c6b2;
  --color-oakwood-400: #b9a790;
  --color-oakwood-500: #9b8a74;
  --color-oakwood-600: #7f6e59;
  --color-oakwood-700: #655643;
  --color-oakwood-800: #504231;
  --color-oakwood-900: #3d3224;
  --color-oakwood-950: #261e14;
  --color-pi: #324155;
  --color-pi-50: #eff6ff;
  --color-pi-100: #e1ecfc;
  --color-pi-200: #cbd9eb;
  --color-pi-300: #b2c2d7;
  --color-pi-400: #91a2b9;
  --color-pi-500: #75869d;
  --color-pi-600: #5b6b81;
  --color-pi-700: #465467;
  --color-pi-800: #324155;
  --color-pi-900: #273240;
  --color-pi-950: #171e28;
}