Swamp Thing to Sugar Milk Color Palette

About this palette

Swamp Thing to Sugar Milk is a 4-color muted palette: #012D2B (Swamp Thing), #206365 (Pacific), #C38980 (Whisky), #FFF6F5 (Sugar Milk). It mixes turquoise, red, white tones and feels cool overall. The strongest text pairing is #012D2B on #FFF6F5 with a contrast ratio of 13.99:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(1, 45, 43)	hsl(177, 96%, 9%)
Pacific	rgb(32, 99, 101)	hsl(182, 52%, 26%)
Whisky	rgb(195, 137, 128)	hsl(8, 36%, 63%)
Sugar Milk	rgb(255, 246, 245)	hsl(6, 100%, 98%)

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.99:1 Super#012D2B on #FFF6F5
Aa13.99:1 Super#FFF6F5 on #012D2B
Aa6.51:1 Good#206365 on #FFF6F5
Aa6.51:1 Good#FFF6F5 on #206365
Aa5.11:1 Good#012D2B on #C38980
Aa5.11:1 Good#C38980 on #012D2B

Color blindness preview

CSS variables

/* Swamp Thing to Sugar Milk — https://swatchly.xyz/palette/012d2b-206365-c38980-fff6f5 */
:root {
  --swamp-thing: #012d2b;
  --pacific: #206365;
  --whisky: #c38980;
  --sugar-milk: #fff6f5;
}

Tailwind CSS v4

/* Swamp Thing to Sugar Milk — https://swatchly.xyz/palette/012d2b-206365-c38980-fff6f5 */
@theme {
  --color-swamp-thing: #012d2b;
  --color-swamp-thing-50: #e3fbf9;
  --color-swamp-thing-100: #d7f2ef;
  --color-swamp-thing-200: #bfdfdc;
  --color-swamp-thing-300: #a5c9c6;
  --color-swamp-thing-400: #82aba7;
  --color-swamp-thing-500: #68918e;
  --color-swamp-thing-600: #4f7774;
  --color-swamp-thing-700: #3c615e;
  --color-swamp-thing-800: #2d4e4c;
  --color-swamp-thing-900: #213f3d;
  --color-swamp-thing-950: #012d2b;
  --color-pacific: #206365;
  --color-pacific-50: #dafdfe;
  --color-pacific-100: #cdf4f5;
  --color-pacific-200: #b3e2e3;
  --color-pacific-300: #97cecf;
  --color-pacific-400: #73afb1;
  --color-pacific-500: #559496;
  --color-pacific-600: #3a7a7c;
  --color-pacific-700: #206365;
  --color-pacific-800: #174e4f;
  --color-pacific-900: #0c3c3d;
  --color-pacific-950: #042627;
  --color-whisky: #c38980;
  --color-whisky-50: #ffeeeb;
  --color-whisky-100: #ffdfd9;
  --color-whisky-200: #f5c5bd;
  --color-whisky-300: #e1aba3;
  --color-whisky-400: #c38980;
  --color-whisky-500: #a76f67;
  --color-whisky-600: #8b574f;
  --color-whisky-700: #72433c;
  --color-whisky-800: #5c332d;
  --color-whisky-900: #492722;
  --color-whisky-950: #301714;
  --color-sugar-milk: #fff6f5;
  --color-sugar-milk-50: #fff6f5;
  --color-sugar-milk-100: #f2ecec;
  --color-sugar-milk-200: #ded8d7;
  --color-sugar-milk-300: #c8c0c0;
  --color-sugar-milk-400: #a8a09f;
  --color-sugar-milk-500: #8c8484;
  --color-sugar-milk-600: #716a69;
  --color-sugar-milk-700: #5a5353;
  --color-sugar-milk-800: #474140;
  --color-sugar-milk-900: #363131;
  --color-sugar-milk-950: #221e1e;
}