Swamp Thing to Lost in the Woods Color Palette

About this palette

Swamp Thing to Lost in the Woods is a 5-color dark, cool palette: #002A25 (Swamp Thing), #2D4B4A (Pine Needle), #665F00 (Ayahuasca Vine), #001709 (Jedi Night), #004022 (Lost in the Woods). It mixes turquoise, brown, black, green tones and feels cool overall. The strongest text pairing is #665F00 on #001709 with a contrast ratio of 2.84:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 42, 37)	hsl(173, 100%, 8%)
Pine Needle	rgb(45, 75, 74)	hsl(178, 25%, 24%)
Ayahuasca Vine	rgb(102, 95, 0)	hsl(56, 100%, 20%)
Jedi Night	rgb(0, 23, 9)	hsl(143, 100%, 5%)
Lost in the Woods	rgb(0, 64, 34)	hsl(152, 100%, 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.

Color blindness preview

CSS variables

/* Swamp Thing to Lost in the Woods — https://swatchly.xyz/palette/002a25-2d4b4a-665f00-001709-004022 */
:root {
  --swamp-thing: #002a25;
  --pine-needle: #2d4b4a;
  --ayahuasca-vine: #665f00;
  --jedi-night: #001709;
  --lost-in-the-woods: #004022;
}

Tailwind CSS v4

/* Swamp Thing to Lost in the Woods — https://swatchly.xyz/palette/002a25-2d4b4a-665f00-001709-004022 */
@theme {
  --color-swamp-thing: #002a25;
  --color-swamp-thing-50: #e4fbf7;
  --color-swamp-thing-100: #d8f2ed;
  --color-swamp-thing-200: #c0dfd9;
  --color-swamp-thing-300: #a6cac3;
  --color-swamp-thing-400: #84aba4;
  --color-swamp-thing-500: #689089;
  --color-swamp-thing-600: #4f7670;
  --color-swamp-thing-700: #3c5f5a;
  --color-swamp-thing-800: #2c4c47;
  --color-swamp-thing-900: #203c38;
  --color-swamp-thing-950: #002a25;
  --color-pine-needle: #2d4b4a;
  --color-pine-needle-50: #e7faf9;
  --color-pine-needle-100: #dbf0ef;
  --color-pine-needle-200: #c4dddc;
  --color-pine-needle-300: #acc8c7;
  --color-pine-needle-400: #8aaaa8;
  --color-pine-needle-500: #6f8f8d;
  --color-pine-needle-600: #567473;
  --color-pine-needle-700: #415d5c;
  --color-pine-needle-800: #2d4b4a;
  --color-pine-needle-900: #243939;
  --color-pine-needle-950: #142423;
  --color-ayahuasca-vine: #665f00;
  --color-ayahuasca-vine-50: #faf8cd;
  --color-ayahuasca-vine-100: #f1eebe;
  --color-ayahuasca-vine-200: #e0dca3;
  --color-ayahuasca-vine-300: #ccc786;
  --color-ayahuasca-vine-400: #afa95f;
  --color-ayahuasca-vine-500: #958f40;
  --color-ayahuasca-vine-600: #7c7525;
  --color-ayahuasca-vine-700: #665f00;
  --color-ayahuasca-vine-800: #504a00;
  --color-ayahuasca-vine-900: #3d3900;
  --color-ayahuasca-vine-950: #272300;
  --color-jedi-night: #001709;
  --color-jedi-night-50: #e9faee;
  --color-jedi-night-100: #def1e4;
  --color-jedi-night-200: #c7decf;
  --color-jedi-night-300: #aec9b7;
  --color-jedi-night-400: #8daa97;
  --color-jedi-night-500: #6e8b78;
  --color-jedi-night-600: #526e5c;
  --color-jedi-night-700: #3c5444;
  --color-jedi-night-800: #293d31;
  --color-jedi-night-900: #1b2b21;
  --color-jedi-night-950: #001709;
  --color-lost-in-the-woods: #004022;
  --color-lost-in-the-woods-50: #dfffe9;
  --color-lost-in-the-woods-100: #d2f6dd;
  --color-lost-in-the-woods-200: #b9e4c7;
  --color-lost-in-the-woods-300: #9ecfae;
  --color-lost-in-the-woods-400: #7ab08e;
  --color-lost-in-the-woods-500: #5e9572;
  --color-lost-in-the-woods-600: #447a59;
  --color-lost-in-the-woods-700: #306345;
  --color-lost-in-the-woods-800: #214e34;
  --color-lost-in-the-woods-900: #004022;
  --color-lost-in-the-woods-950: #0a2717;
}