Haunted Forest to Love Fumes color palette

142E16Haunted Forest 005869Abyssal Waters B8476BMauve It 81CA94Exhilarating Green FFCDD1Love Fumes

About this palette

Haunted Forest to Love Fumes is a 5-color cool, vintage palette: #142E16 (Haunted Forest), #005869 (Abyssal Waters), #B8476B (Mauve It), #81CA94 (Exhilarating Green), #FFCDD1 (Love Fumes). It mixes green, blue, red, pink tones and feels cool overall. The strongest text pairing is #142E16 on #FFCDD1 with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunted Forest	rgb(20, 46, 22)	hsl(125, 39%, 13%)
Abyssal Waters	rgb(0, 88, 105)	hsl(190, 100%, 21%)
Mauve It	rgb(184, 71, 107)	hsl(341, 44%, 50%)
Exhilarating Green	rgb(129, 202, 148)	hsl(136, 41%, 65%)
Love Fumes	rgb(255, 205, 209)	hsl(355, 100%, 90%)

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.41:1 Very good#142E16 on #FFCDD1
Aa10.41:1 Very good#FFCDD1 on #142E16
Aa7.55:1 Very good#142E16 on #81CA94
Aa7.55:1 Very good#81CA94 on #142E16
Aa5.73:1 Good#005869 on #FFCDD1
Aa5.73:1 Good#FFCDD1 on #005869
Aa4.16:1 Poor#005869 on #81CA94
Aa4.16:1 Poor#81CA94 on #005869

Color blindness preview

CSS variables

/* Haunted Forest to Love Fumes — https://swatchly.xyz/palette/142e16-005869-b8476b-81ca94-ffcdd1 */
:root {
  --haunted-forest: #142e16;
  --abyssal-waters: #005869;
  --mauve-it: #b8476b;
  --exhilarating-green: #81ca94;
  --love-fumes: #ffcdd1;
}

Tailwind CSS v4

/* Haunted Forest to Love Fumes — https://swatchly.xyz/palette/142e16-005869-b8476b-81ca94-ffcdd1 */
@theme {
  --color-haunted-forest: #142e16;
  --color-haunted-forest-50: #e9fbe9;
  --color-haunted-forest-100: #def2de;
  --color-haunted-forest-200: #c8dfc8;
  --color-haunted-forest-300: #afc9af;
  --color-haunted-forest-400: #8eab8e;
  --color-haunted-forest-500: #749174;
  --color-haunted-forest-600: #5b785c;
  --color-haunted-forest-700: #486248;
  --color-haunted-forest-800: #384f39;
  --color-haunted-forest-900: #2b402c;
  --color-haunted-forest-950: #142e16;
  --color-abyssal-waters: #005869;
  --color-abyssal-waters-50: #e5f9ff;
  --color-abyssal-waters-100: #caf3ff;
  --color-abyssal-waters-200: #ace0ee;
  --color-abyssal-waters-300: #8dc9da;
  --color-abyssal-waters-400: #66a9bb;
  --color-abyssal-waters-500: #468c9e;
  --color-abyssal-waters-600: #2a7081;
  --color-abyssal-waters-700: #005869;
  --color-abyssal-waters-800: #064451;
  --color-abyssal-waters-900: #013540;
  --color-abyssal-waters-950: #002129;
  --color-mauve-it: #b8476b;
  --color-mauve-it-50: #fff1f4;
  --color-mauve-it-100: #ffe5eb;
  --color-mauve-it-200: #ffcbd6;
  --color-mauve-it-300: #ffa9be;
  --color-mauve-it-400: #ef7f9e;
  --color-mauve-it-500: #d56284;
  --color-mauve-it-600: #b8476b;
  --color-mauve-it-700: #993054;
  --color-mauve-it-800: #7c1f40;
  --color-mauve-it-900: #621230;
  --color-mauve-it-950: #41071d;
  --color-exhilarating-green: #81ca94;
  --color-exhilarating-green-50: #d2fcdb;
  --color-exhilarating-green-100: #c2f2cd;
  --color-exhilarating-green-200: #a6dfb3;
  --color-exhilarating-green-300: #81ca94;
  --color-exhilarating-green-400: #65ab78;
  --color-exhilarating-green-500: #49915f;
  --color-exhilarating-green-600: #317848;
  --color-exhilarating-green-700: #1e6136;
  --color-exhilarating-green-800: #114e28;
  --color-exhilarating-green-900: #073e1d;
  --color-exhilarating-green-950: #022710;
  --color-love-fumes: #ffcdd1;
  --color-love-fumes-50: #fff5f6;
  --color-love-fumes-100: #ffe8ea;
  --color-love-fumes-200: #ffcdd1;
  --color-love-fumes-300: #e1b8bc;
  --color-love-fumes-400: #c4979a;
  --color-love-fumes-500: #a77a7e;
  --color-love-fumes-600: #8a6064;
  --color-love-fumes-700: #704a4d;
  --color-love-fumes-800: #59383b;
  --color-love-fumes-900: #462a2d;
  --color-love-fumes-950: #2d191b;
}