Swamp Thing to Pineapple Color Palette

About this palette

Swamp Thing to Pineapple is a 4-color dark palette: #002925 (Swamp Thing), #764C09 (Milk Chocolate), #120E00 (Memorial Black), #5D3E00 (Pineapple). It mixes turquoise, brown, black tones and feels warm overall. The strongest text pairing is #764C09 on #120E00 with a contrast ratio of 2.58:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 41, 37)	hsl(174, 100%, 8%)
Milk Chocolate	rgb(118, 76, 9)	hsl(37, 86%, 25%)
Memorial Black	rgb(18, 14, 0)	hsl(47, 100%, 4%)
Pineapple	rgb(93, 62, 0)	hsl(40, 100%, 18%)

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 Pineapple — https://swatchly.xyz/palette/002925-764c09-120e00-5d3e00 */
:root {
  --swamp-thing: #002925;
  --milk-chocolate: #764c09;
  --memorial-black: #120e00;
  --pineapple: #5d3e00;
}

Tailwind CSS v4

/* Swamp Thing to Pineapple — https://swatchly.xyz/palette/002925-764c09-120e00-5d3e00 */
@theme {
  --color-swamp-thing: #002925;
  --color-swamp-thing-50: #e4fbf7;
  --color-swamp-thing-100: #d8f2ed;
  --color-swamp-thing-200: #c0dfda;
  --color-swamp-thing-300: #a6c9c4;
  --color-swamp-thing-400: #84aba5;
  --color-swamp-thing-500: #68908a;
  --color-swamp-thing-600: #4f7670;
  --color-swamp-thing-700: #3c5f5a;
  --color-swamp-thing-800: #2c4b47;
  --color-swamp-thing-900: #203b38;
  --color-swamp-thing-950: #002925;
  --color-milk-chocolate: #764c09;
  --color-milk-chocolate-50: #fff3e5;
  --color-milk-chocolate-100: #ffe7cb;
  --color-milk-chocolate-200: #f5d1a6;
  --color-milk-chocolate-300: #e2b988;
  --color-milk-chocolate-400: #c59962;
  --color-milk-chocolate-500: #aa7d44;
  --color-milk-chocolate-600: #8e6329;
  --color-milk-chocolate-700: #764c09;
  --color-milk-chocolate-800: #5d3b05;
  --color-milk-chocolate-900: #492c00;
  --color-milk-chocolate-950: #2f1b00;
  --color-memorial-black: #120e00;
  --color-memorial-black-50: #f8f6e8;
  --color-memorial-black-100: #efecdc;
  --color-memorial-black-200: #dcd8c6;
  --color-memorial-black-300: #c6c1ad;
  --color-memorial-black-400: #a7a28b;
  --color-memorial-black-500: #87836c;
  --color-memorial-black-600: #696550;
  --color-memorial-black-700: #4f4b39;
  --color-memorial-black-800: #393526;
  --color-memorial-black-900: #262318;
  --color-memorial-black-950: #120e00;
  --color-pineapple: #5d3e00;
  --color-pineapple-50: #fff3e3;
  --color-pineapple-100: #ffe8c6;
  --color-pineapple-200: #eed3ab;
  --color-pineapple-300: #dbbc8f;
  --color-pineapple-400: #be9c6a;
  --color-pineapple-500: #a3814d;
  --color-pineapple-600: #886734;
  --color-pineapple-700: #6f5121;
  --color-pineapple-800: #5d3e00;
  --color-pineapple-900: #463009;
  --color-pineapple-950: #2d1d03;
}