Haunted Forest to Innocent Snowdrop color palette

002B18Haunted Forest 294096Liquid Denim B14D97Magenta Memoir AB9933Greedy Gecko C3CCFFInnocent Snowdrop

Open in generator Export PNG, PDF, ASE…

About this palette

Haunted Forest to Innocent Snowdrop is a 5-color cool palette: #002B18 (Haunted Forest), #294096 (Liquid Denim), #B14D97 (Magenta Memoir), #AB9933 (Greedy Gecko), #C3CCFF (Innocent Snowdrop). It mixes green, blue, pink, yellow, purple tones and feels cool overall. The strongest text pairing is #002B18 on #C3CCFF with a contrast ratio of 9.86:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haunted Forest	rgb(0, 43, 24)	hsl(153, 100%, 8%)
Liquid Denim	rgb(41, 64, 150)	hsl(227, 57%, 37%)
Magenta Memoir	rgb(177, 77, 151)	hsl(316, 39%, 50%)
Greedy Gecko	rgb(171, 153, 51)	hsl(51, 54%, 44%)
Innocent Snowdrop	rgb(195, 204, 255)	hsl(231, 100%, 88%)

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.

Aa9.86:1 Very good#002B18 on #C3CCFF
Aa9.86:1 Very good#C3CCFF on #002B18
Aa5.91:1 Good#294096 on #C3CCFF
Aa5.91:1 Good#C3CCFF on #294096
Aa5.40:1 Good#002B18 on #AB9933
Aa5.40:1 Good#AB9933 on #002B18
Aa3.23:1 Poor#294096 on #AB9933
Aa3.23:1 Poor#AB9933 on #294096

Color blindness preview

CSS variables

/* Haunted Forest to Innocent Snowdrop — https://swatchly.xyz/palette/002b18-294096-b14d97-ab9933-c3ccff */
:root {
  --haunted-forest: #002b18;
  --liquid-denim: #294096;
  --magenta-memoir: #b14d97;
  --greedy-gecko: #ab9933;
  --innocent-snowdrop: #c3ccff;
}

Tailwind CSS v4

/* Haunted Forest to Innocent Snowdrop — https://swatchly.xyz/palette/002b18-294096-b14d97-ab9933-c3ccff */
@theme {
  --color-haunted-forest: #002b18;
  --color-haunted-forest-50: #e4fced;
  --color-haunted-forest-100: #d8f3e2;
  --color-haunted-forest-200: #c0e1cd;
  --color-haunted-forest-300: #a6cbb5;
  --color-haunted-forest-400: #84ad95;
  --color-haunted-forest-500: #68927a;
  --color-haunted-forest-600: #4f7861;
  --color-haunted-forest-700: #3c614c;
  --color-haunted-forest-800: #2c4d3b;
  --color-haunted-forest-900: #203d2d;
  --color-haunted-forest-950: #002b18;
  --color-liquid-denim: #294096;
  --color-liquid-denim-50: #f1f5ff;
  --color-liquid-denim-100: #e3ebff;
  --color-liquid-denim-200: #c7d7ff;
  --color-liquid-denim-300: #a9c1ff;
  --color-liquid-denim-400: #7fa0fa;
  --color-liquid-denim-500: #6584e1;
  --color-liquid-denim-600: #4d6ac3;
  --color-liquid-denim-700: #3b54a7;
  --color-liquid-denim-800: #294096;
  --color-liquid-denim-900: #203272;
  --color-liquid-denim-950: #121f4d;
  --color-magenta-memoir: #b14d97;
  --color-magenta-memoir-50: #fff0fa;
  --color-magenta-memoir-100: #ffe5f6;
  --color-magenta-memoir-200: #ffc9ed;
  --color-magenta-memoir-300: #ffa6e4;
  --color-magenta-memoir-400: #e583c9;
  --color-magenta-memoir-500: #cc67b1;
  --color-magenta-memoir-600: #b14d97;
  --color-magenta-memoir-700: #92357b;
  --color-magenta-memoir-800: #762363;
  --color-magenta-memoir-900: #5e154d;
  --color-magenta-memoir-950: #3d0832;
  --color-greedy-gecko: #ab9933;
  --color-greedy-gecko-50: #fdf3be;
  --color-greedy-gecko-100: #f3e8ab;
  --color-greedy-gecko-200: #e0d38a;
  --color-greedy-gecko-300: #caba66;
  --color-greedy-gecko-400: #ab9933;
  --color-greedy-gecko-500: #917f09;
  --color-greedy-gecko-600: #756600;
  --color-greedy-gecko-700: #5e5100;
  --color-greedy-gecko-800: #4a4000;
  --color-greedy-gecko-900: #3a3200;
  --color-greedy-gecko-950: #251f00;
  --color-innocent-snowdrop: #c3ccff;
  --color-innocent-snowdrop-50: #ebefff;
  --color-innocent-snowdrop-100: #dde3ff;
  --color-innocent-snowdrop-200: #c3ccff;
  --color-innocent-snowdrop-300: #b0b7e3;
  --color-innocent-snowdrop-400: #9199c8;
  --color-innocent-snowdrop-500: #777fae;
  --color-innocent-snowdrop-600: #5f6692;
  --color-innocent-snowdrop-700: #4b5179;
  --color-innocent-snowdrop-800: #3a3f62;
  --color-innocent-snowdrop-900: #2c304e;
  --color-innocent-snowdrop-950: #1a1d33;
}