Pastel Mint to Haunted Forest Color Palette

About this palette

Pastel Mint to Haunted Forest is a 5-color cool, earthy, monochromatic, gradient palette: #C8EFC6 (Pastel Mint), #75BC74 (Leafy Greens), #4DA05C (Savage Garden), #2C6238 (Midori), #042F13 (Haunted Forest). It mixes green tones and feels cool overall. The strongest text pairing is #C8EFC6 on #042F13 with a contrast ratio of 11.69:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Mint	rgb(200, 239, 198)	hsl(117, 56%, 86%)
Leafy Greens	rgb(117, 188, 116)	hsl(119, 35%, 60%)
Savage Garden	rgb(77, 160, 92)	hsl(131, 35%, 46%)
Midori	rgb(44, 98, 56)	hsl(133, 38%, 28%)
Haunted Forest	rgb(4, 47, 19)	hsl(141, 84%, 10%)

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.69:1 Very good#C8EFC6 on #042F13
Aa11.69:1 Very good#042F13 on #C8EFC6
Aa6.47:1 Good#75BC74 on #042F13
Aa6.47:1 Good#042F13 on #75BC74
Aa5.71:1 Good#C8EFC6 on #2C6238
Aa5.71:1 Good#2C6238 on #C8EFC6
Aa4.57:1 Good#4DA05C on #042F13
Aa4.57:1 Good#042F13 on #4DA05C

Color blindness preview

CSS variables

/* Pastel Mint to Haunted Forest — https://swatchly.xyz/palette/c8efc6-75bc74-4da05c-2c6238-042f13 */
:root {
  --pastel-mint: #c8efc6;
  --leafy-greens: #75bc74;
  --savage-garden: #4da05c;
  --midori: #2c6238;
  --haunted-forest: #042f13;
}

Tailwind CSS v4

/* Pastel Mint to Haunted Forest — https://swatchly.xyz/palette/c8efc6-75bc74-4da05c-2c6238-042f13 */
@theme {
  --color-pastel-mint: #c8efc6;
  --color-pastel-mint-50: #def6dd;
  --color-pastel-mint-100: #c8efc6;
  --color-pastel-mint-200: #bcdabb;
  --color-pastel-mint-300: #a5c6a3;
  --color-pastel-mint-400: #85a983;
  --color-pastel-mint-500: #6b8f69;
  --color-pastel-mint-600: #537551;
  --color-pastel-mint-700: #3f5f3e;
  --color-pastel-mint-800: #2f4a2e;
  --color-pastel-mint-900: #223a22;
  --color-pastel-mint-950: #132413;
  --color-leafy-greens: #75bc74;
  --color-leafy-greens-50: #e8ffe7;
  --color-leafy-greens-100: #d1fccf;
  --color-leafy-greens-200: #b9ecb7;
  --color-leafy-greens-300: #9dd89b;
  --color-leafy-greens-400: #75bc74;
  --color-leafy-greens-500: #599e58;
  --color-leafy-greens-600: #3d823d;
  --color-leafy-greens-700: #276829;
  --color-leafy-greens-800: #17521a;
  --color-leafy-greens-900: #0c3f0f;
  --color-leafy-greens-950: #042706;
  --color-savage-garden: #4da05c;
  --color-savage-garden-50: #e3ffe5;
  --color-savage-garden-100: #cafcd0;
  --color-savage-garden-200: #b0ecb7;
  --color-savage-garden-300: #93d89c;
  --color-savage-garden-400: #6dbb79;
  --color-savage-garden-500: #4da05c;
  --color-savage-garden-600: #308342;
  --color-savage-garden-700: #186a2d;
  --color-savage-garden-800: #05531e;
  --color-savage-garden-900: #004014;
  --color-savage-garden-950: #002809;
  --color-midori: #2c6238;
  --color-midori-50: #dfffe4;
  --color-midori-100: #d3f6d7;
  --color-midori-200: #bae4c0;
  --color-midori-300: #9fcfa6;
  --color-midori-400: #7bb084;
  --color-midori-500: #5e9568;
  --color-midori-600: #44794f;
  --color-midori-700: #2c6238;
  --color-midori-800: #214d2b;
  --color-midori-900: #163b1f;
  --color-midori-950: #0b2511;
  --color-haunted-forest: #042f13;
  --color-haunted-forest-50: #e4fde8;
  --color-haunted-forest-100: #d8f4dd;
  --color-haunted-forest-200: #c1e2c6;
  --color-haunted-forest-300: #a7ccae;
  --color-haunted-forest-400: #84ae8c;
  --color-haunted-forest-500: #699472;
  --color-haunted-forest-600: #517a5a;
  --color-haunted-forest-700: #3e6446;
  --color-haunted-forest-800: #2f5136;
  --color-haunted-forest-900: #23412a;
  --color-haunted-forest-950: #042f13;
}