Ecological to Swamp Thing Color Palette

About this palette

Ecological to Swamp Thing is a 5-color muted palette: #667F6F (Ecological), #37513C (Highlander), #9FB4A8 (Copper Patina), #E4FAE8 (Toxic Latte), #1A2B22 (Swamp Thing). It mixes green, gray, white tones and feels cool overall. The strongest text pairing is #E4FAE8 on #1A2B22 with a contrast ratio of 13.55:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ecological	rgb(102, 127, 111)	hsl(142, 11%, 45%)
Highlander	rgb(55, 81, 60)	hsl(132, 19%, 27%)
Copper Patina	rgb(159, 180, 168)	hsl(146, 12%, 66%)
Toxic Latte	rgb(228, 250, 232)	hsl(131, 69%, 94%)
Swamp Thing	rgb(26, 43, 34)	hsl(148, 25%, 14%)

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.

Aa13.55:1 Super#E4FAE8 on #1A2B22
Aa13.55:1 Super#1A2B22 on #E4FAE8
Aa7.96:1 Very good#37513C on #E4FAE8
Aa7.96:1 Very good#E4FAE8 on #37513C
Aa6.77:1 Good#9FB4A8 on #1A2B22
Aa6.77:1 Good#1A2B22 on #9FB4A8
Aa3.98:1 Poor#37513C on #9FB4A8
Aa3.98:1 Poor#9FB4A8 on #37513C

Color blindness preview

CSS variables

/* Ecological to Swamp Thing — https://swatchly.xyz/palette/667f6f-37513c-9fb4a8-e4fae8-1a2b22 */
:root {
  --ecological: #667f6f;
  --highlander: #37513c;
  --copper-patina: #9fb4a8;
  --toxic-latte: #e4fae8;
  --swamp-thing: #1a2b22;
}

Tailwind CSS v4

/* Ecological to Swamp Thing — https://swatchly.xyz/palette/667f6f-37513c-9fb4a8-e4fae8-1a2b22 */
@theme {
  --color-ecological: #667f6f;
  --color-ecological-50: #eafaf0;
  --color-ecological-100: #e2f2e7;
  --color-ecological-200: #cee2d5;
  --color-ecological-300: #b8cec0;
  --color-ecological-400: #99b1a1;
  --color-ecological-500: #7e9888;
  --color-ecological-600: #667f6f;
  --color-ecological-700: #4e6557;
  --color-ecological-800: #3b4f43;
  --color-ecological-900: #2c3d32;
  --color-ecological-950: #19261e;
  --color-highlander: #37513c;
  --color-highlander-50: #eafaec;
  --color-highlander-100: #def1e1;
  --color-highlander-200: #c8decc;
  --color-highlander-300: #b1cab5;
  --color-highlander-400: #91ad96;
  --color-highlander-500: #77937b;
  --color-highlander-600: #5e7963;
  --color-highlander-700: #4a634e;
  --color-highlander-800: #37513c;
  --color-highlander-900: #2b3e2e;
  --color-highlander-950: #19281c;
  --color-copper-patina: #9fb4a8;
  --color-copper-patina-50: #f2fdf6;
  --color-copper-patina-100: #e9f5ee;
  --color-copper-patina-200: #d6e5dc;
  --color-copper-patina-300: #bfd1c7;
  --color-copper-patina-400: #9fb4a8;
  --color-copper-patina-500: #82968a;
  --color-copper-patina-600: #65796e;
  --color-copper-patina-700: #4e6056;
  --color-copper-patina-800: #3b4a42;
  --color-copper-patina-900: #2b3831;
  --color-copper-patina-950: #19221d;
  --color-toxic-latte: #e4fae8;
  --color-toxic-latte-50: #e4fae8;
  --color-toxic-latte-100: #e0eee3;
  --color-toxic-latte-200: #cbdbce;
  --color-toxic-latte-300: #b3c6b7;
  --color-toxic-latte-400: #93a797;
  --color-toxic-latte-500: #788c7c;
  --color-toxic-latte-600: #5f7162;
  --color-toxic-latte-700: #495a4d;
  --color-toxic-latte-800: #38473b;
  --color-toxic-latte-900: #2a372c;
  --color-toxic-latte-950: #19221b;
  --color-swamp-thing: #1a2b22;
  --color-swamp-thing-50: #edf9f2;
  --color-swamp-thing-100: #e2efe7;
  --color-swamp-thing-200: #ccdcd3;
  --color-swamp-thing-300: #b4c6bc;
  --color-swamp-thing-400: #94a79c;
  --color-swamp-thing-500: #798d82;
  --color-swamp-thing-600: #617469;
  --color-swamp-thing-700: #4d5e55;
  --color-swamp-thing-800: #3d4c43;
  --color-swamp-thing-900: #2f3d36;
  --color-swamp-thing-950: #1a2b22;
}