Love Fumes to Swamp Thing Color Palette

About this palette

Love Fumes to Swamp Thing is a 4-color cool palette: #FFCDD5 (Love Fumes), #B589E7 (Dreamy Candy Forest), #576117 (Forestial Outpost), #002A25 (Swamp Thing). It mixes pink, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #FFCDD5 on #002A25 with a contrast ratio of 11.01:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Love Fumes	rgb(255, 205, 213)	hsl(350, 100%, 90%)
Dreamy Candy Forest	rgb(181, 137, 231)	hsl(268, 66%, 72%)
Forestial Outpost	rgb(87, 97, 23)	hsl(68, 62%, 24%)
Swamp Thing	rgb(0, 42, 37)	hsl(173, 100%, 8%)

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.

Aa11.01:1 Very good#FFCDD5 on #002A25
Aa11.01:1 Very good#002A25 on #FFCDD5
Aa5.67:1 Good#B589E7 on #002A25
Aa5.67:1 Good#002A25 on #B589E7
Aa4.78:1 Good#FFCDD5 on #576117
Aa4.78:1 Good#576117 on #FFCDD5

Color blindness preview

CSS variables

/* Love Fumes to Swamp Thing — https://swatchly.xyz/palette/ffcdd5-b589e7-576117-002a25 */
:root {
  --love-fumes: #ffcdd5;
  --dreamy-candy-forest: #b589e7;
  --forestial-outpost: #576117;
  --swamp-thing: #002a25;
}

Tailwind CSS v4

/* Love Fumes to Swamp Thing — https://swatchly.xyz/palette/ffcdd5-b589e7-576117-002a25 */
@theme {
  --color-love-fumes: #ffcdd5;
  --color-love-fumes-50: #fff5f7;
  --color-love-fumes-100: #ffe9ec;
  --color-love-fumes-200: #ffcdd5;
  --color-love-fumes-300: #e1b8bf;
  --color-love-fumes-400: #c4979e;
  --color-love-fumes-500: #a77a82;
  --color-love-fumes-600: #8a6067;
  --color-love-fumes-700: #704950;
  --color-love-fumes-800: #59373e;
  --color-love-fumes-900: #462a2f;
  --color-love-fumes-950: #2d191c;
  --color-dreamy-candy-forest: #b589e7;
  --color-dreamy-candy-forest-50: #f7f2ff;
  --color-dreamy-candy-forest-100: #f0e5ff;
  --color-dreamy-candy-forest-200: #e2ccff;
  --color-dreamy-candy-forest-300: #d2adff;
  --color-dreamy-candy-forest-400: #b589e7;
  --color-dreamy-candy-forest-500: #996ec9;
  --color-dreamy-candy-forest-600: #7e53ab;
  --color-dreamy-candy-forest-700: #663e8e;
  --color-dreamy-candy-forest-800: #512e74;
  --color-dreamy-candy-forest-900: #3f215c;
  --color-dreamy-candy-forest-950: #28123d;
  --color-forestial-outpost: #576117;
  --color-forestial-outpost-50: #f2fad3;
  --color-forestial-outpost-100: #e8f1c4;
  --color-forestial-outpost-200: #d5dfaa;
  --color-forestial-outpost-300: #bfca8e;
  --color-forestial-outpost-400: #a0ac69;
  --color-forestial-outpost-500: #86914b;
  --color-forestial-outpost-600: #6d7731;
  --color-forestial-outpost-700: #576117;
  --color-forestial-outpost-800: #444c0e;
  --color-forestial-outpost-900: #343a04;
  --color-forestial-outpost-950: #202500;
  --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;
}