Swamp Thing to Wave Color Palette

About this palette

Swamp Thing to Wave is a 5-color muted, cool palette: #1C2A29 (Swamp Thing), #446766 (Moonlit Forest), #5C8C8A (Arctic), #EAFDFD (Bubbles), #ABCECB (Wave). It mixes gray, turquoise, white tones and feels cool overall. The strongest text pairing is #1C2A29 on #EAFDFD with a contrast ratio of 14.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(28, 42, 41)	hsl(176, 20%, 14%)
Moonlit Forest	rgb(68, 103, 102)	hsl(178, 20%, 34%)
Arctic	rgb(92, 140, 138)	hsl(177, 21%, 45%)
Bubbles	rgb(234, 253, 253)	hsl(180, 83%, 95%)
Wave	rgb(171, 206, 203)	hsl(175, 26%, 74%)

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.

Aa14.14:1 Super#1C2A29 on #EAFDFD
Aa14.14:1 Super#EAFDFD on #1C2A29
Aa8.79:1 Very good#1C2A29 on #ABCECB
Aa8.79:1 Very good#ABCECB on #1C2A29
Aa5.91:1 Good#446766 on #EAFDFD
Aa5.91:1 Good#EAFDFD on #446766
Aa3.95:1 Poor#1C2A29 on #5C8C8A
Aa3.95:1 Poor#5C8C8A on #1C2A29

Color blindness preview

CSS variables

/* Swamp Thing to Wave — https://swatchly.xyz/palette/1c2a29-446766-5c8c8a-eafdfd-abcecb */
:root {
  --swamp-thing: #1c2a29;
  --moonlit-forest: #446766;
  --arctic: #5c8c8a;
  --bubbles: #eafdfd;
  --wave: #abcecb;
}

Tailwind CSS v4

/* Swamp Thing to Wave — https://swatchly.xyz/palette/1c2a29-446766-5c8c8a-eafdfd-abcecb */
@theme {
  --color-swamp-thing: #1c2a29;
  --color-swamp-thing-50: #eef7f7;
  --color-swamp-thing-100: #e3eeed;
  --color-swamp-thing-200: #cedbd9;
  --color-swamp-thing-300: #b6c4c3;
  --color-swamp-thing-400: #95a5a4;
  --color-swamp-thing-500: #7b8c8a;
  --color-swamp-thing-600: #637371;
  --color-swamp-thing-700: #4f5d5c;
  --color-swamp-thing-800: #3e4b4a;
  --color-swamp-thing-900: #313c3b;
  --color-swamp-thing-950: #1c2a29;
  --color-moonlit-forest: #446766;
  --color-moonlit-forest-50: #e5faf9;
  --color-moonlit-forest-100: #d9f1f0;
  --color-moonlit-forest-200: #c4e0df;
  --color-moonlit-forest-300: #adcccb;
  --color-moonlit-forest-400: #8cafae;
  --color-moonlit-forest-500: #729694;
  --color-moonlit-forest-600: #597c7b;
  --color-moonlit-forest-700: #446766;
  --color-moonlit-forest-800: #335150;
  --color-moonlit-forest-900: #253e3e;
  --color-moonlit-forest-950: #152727;
  --color-arctic: #5c8c8a;
  --color-arctic-50: #dffbf9;
  --color-arctic-100: #d2f1ef;
  --color-arctic-200: #b8dedc;
  --color-arctic-300: #9dc8c5;
  --color-arctic-400: #79a8a6;
  --color-arctic-500: #5c8c8a;
  --color-arctic-600: #447270;
  --color-arctic-700: #315b5a;
  --color-arctic-800: #224846;
  --color-arctic-900: #173837;
  --color-arctic-950: #0c2322;
  --color-bubbles: #eafdfd;
  --color-bubbles-50: #eafdfd;
  --color-bubbles-100: #e5f1f1;
  --color-bubbles-200: #cfdddd;
  --color-bubbles-300: #b7c6c6;
  --color-bubbles-400: #96a6a6;
  --color-bubbles-500: #798b8b;
  --color-bubbles-600: #5f7070;
  --color-bubbles-700: #4a5959;
  --color-bubbles-800: #384545;
  --color-bubbles-900: #2a3535;
  --color-bubbles-950: #192121;
  --color-wave: #abcecb;
  --color-wave-50: #e9fcfa;
  --color-wave-100: #dff4f2;
  --color-wave-200: #c8e2df;
  --color-wave-300: #abcecb;
  --color-wave-400: #8dadaa;
  --color-wave-500: #70918e;
  --color-wave-600: #557573;
  --color-wave-700: #405d5b;
  --color-wave-800: #2f4947;
  --color-wave-900: #223736;
  --color-wave-950: #132321;
}