Swamp Thing to Ephemeral Red color palette

172623Swamp Thing 5B454AChinotto 5D7A71Camping Trip C8A8B7Monet Magic E8D0D4Ephemeral Red

About this palette

Swamp Thing to Ephemeral Red is a 5-color muted, gradient palette: #172623 (Swamp Thing), #5B454A (Chinotto), #5D7A71 (Camping Trip), #C8A8B7 (Monet Magic), #E8D0D4 (Ephemeral Red). It mixes gray, turquoise, pink tones and feels balanced overall. The strongest text pairing is #172623 on #E8D0D4 with a contrast ratio of 10.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(23, 38, 35)	hsl(168, 25%, 12%)
Chinotto	rgb(91, 69, 74)	hsl(346, 14%, 31%)
Camping Trip	rgb(93, 122, 113)	hsl(161, 13%, 42%)
Monet Magic	rgb(200, 168, 183)	hsl(332, 23%, 72%)
Ephemeral Red	rgb(232, 208, 212)	hsl(350, 34%, 86%)

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.

Aa10.77:1 Very good#172623 on #E8D0D4
Aa10.77:1 Very good#E8D0D4 on #172623
Aa7.28:1 Very good#172623 on #C8A8B7
Aa7.28:1 Very good#C8A8B7 on #172623
Aa6.01:1 Good#5B454A on #E8D0D4
Aa6.01:1 Good#E8D0D4 on #5B454A
Aa4.07:1 Poor#5B454A on #C8A8B7
Aa4.07:1 Poor#C8A8B7 on #5B454A

Color blindness preview

CSS variables

/* Swamp Thing to Ephemeral Red — https://swatchly.xyz/palette/172623-5b454a-5d7a71-c8a8b7-e8d0d4 */
:root {
  --swamp-thing: #172623;
  --chinotto: #5b454a;
  --camping-trip: #5d7a71;
  --monet-magic: #c8a8b7;
  --ephemeral-red: #e8d0d4;
}

Tailwind CSS v4

/* Swamp Thing to Ephemeral Red — https://swatchly.xyz/palette/172623-5b454a-5d7a71-c8a8b7-e8d0d4 */
@theme {
  --color-swamp-thing: #172623;
  --color-swamp-thing-50: #edf8f5;
  --color-swamp-thing-100: #e2eeeb;
  --color-swamp-thing-200: #cddbd8;
  --color-swamp-thing-300: #b5c5c1;
  --color-swamp-thing-400: #94a6a2;
  --color-swamp-thing-500: #7a8b87;
  --color-swamp-thing-600: #60716e;
  --color-swamp-thing-700: #4c5b58;
  --color-swamp-thing-800: #3b4845;
  --color-swamp-thing-900: #2d3936;
  --color-swamp-thing-950: #172623;
  --color-chinotto: #5b454a;
  --color-chinotto-50: #fff1f4;
  --color-chinotto-100: #f7e6ea;
  --color-chinotto-200: #e4d0d4;
  --color-chinotto-300: #cdb6bb;
  --color-chinotto-400: #ad959a;
  --color-chinotto-500: #90787d;
  --color-chinotto-600: #735d62;
  --color-chinotto-700: #5b454a;
  --color-chinotto-800: #463639;
  --color-chinotto-900: #37292c;
  --color-chinotto-950: #22181a;
  --color-camping-trip: #5d7a71;
  --color-camping-trip-50: #e8faf4;
  --color-camping-trip-100: #def2eb;
  --color-camping-trip-200: #c9e0d9;
  --color-camping-trip-300: #b2ccc3;
  --color-camping-trip-400: #91aea5;
  --color-camping-trip-500: #76948a;
  --color-camping-trip-600: #5d7a71;
  --color-camping-trip-700: #476159;
  --color-camping-trip-800: #354c45;
  --color-camping-trip-900: #273b35;
  --color-camping-trip-950: #162520;
  --color-monet-magic: #c8a8b7;
  --color-monet-magic-50: #fce7f0;
  --color-monet-magic-100: #f1dae4;
  --color-monet-magic-200: #ddc3cf;
  --color-monet-magic-300: #c8a8b7;
  --color-monet-magic-400: #aa8c9a;
  --color-monet-magic-500: #917381;
  --color-monet-magic-600: #785c69;
  --color-monet-magic-700: #624955;
  --color-monet-magic-800: #4f3944;
  --color-monet-magic-900: #3f2c36;
  --color-monet-magic-950: #281b21;
  --color-ephemeral-red: #e8d0d4;
  --color-ephemeral-red-50: #fff1f3;
  --color-ephemeral-red-100: #f6e6e9;
  --color-ephemeral-red-200: #e8d0d4;
  --color-ephemeral-red-300: #cfbbbe;
  --color-ephemeral-red-400: #b19b9e;
  --color-ephemeral-red-500: #957f83;
  --color-ephemeral-red-600: #7a6569;
  --color-ephemeral-red-700: #625053;
  --color-ephemeral-red-800: #4e3d40;
  --color-ephemeral-red-900: #3c2f31;
  --color-ephemeral-red-950: #261c1e;
}