Everglade to Moon Veil color palette

2C4434Everglade D1D1B0Bitter Melon FFF9E2Magnolia 4D6D55Toad King 856E81Moonscape 9399BAMoon Veil

Open in generator Export PNG, PDF, ASE…

About this palette

Everglade to Moon Veil is a 6-color muted palette: #2C4434 (Everglade), #D1D1B0 (Bitter Melon), #FFF9E2 (Magnolia), #4D6D55 (Toad King), #856E81 (Moonscape), #9399BA (Moon Veil). It mixes green, yellow, white, pink, purple tones and feels cool overall. The strongest text pairing is #2C4434 on #FFF9E2 with a contrast ratio of 10.03:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Everglade	rgb(44, 68, 52)	hsl(140, 21%, 22%)
Bitter Melon	rgb(209, 209, 176)	hsl(60, 26%, 75%)
Magnolia	rgb(255, 249, 226)	hsl(48, 100%, 94%)
Toad King	rgb(77, 109, 85)	hsl(135, 17%, 36%)
Moonscape	rgb(133, 110, 129)	hsl(310, 9%, 48%)
Moon Veil	rgb(147, 153, 186)	hsl(231, 22%, 65%)

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.03:1 Very good#2C4434 on #FFF9E2
Aa10.03:1 Very good#FFF9E2 on #2C4434
Aa6.78:1 Good#2C4434 on #D1D1B0
Aa6.78:1 Good#D1D1B0 on #2C4434
Aa5.48:1 Good#FFF9E2 on #4D6D55
Aa5.48:1 Good#4D6D55 on #FFF9E2
Aa4.38:1 Poor#FFF9E2 on #856E81
Aa4.38:1 Poor#856E81 on #FFF9E2

Color blindness preview

CSS variables

/* Everglade to Moon Veil — https://swatchly.xyz/palette/2c4434-d1d1b0-fff9e2-4d6d55-856e81-9399ba */
:root {
  --everglade: #2c4434;
  --bitter-melon: #d1d1b0;
  --magnolia: #fff9e2;
  --toad-king: #4d6d55;
  --moonscape: #856e81;
  --moon-veil: #9399ba;
}

Tailwind CSS v4

/* Everglade to Moon Veil — https://swatchly.xyz/palette/2c4434-d1d1b0-fff9e2-4d6d55-856e81-9399ba */
@theme {
  --color-everglade: #2c4434;
  --color-everglade-50: #eafaef;
  --color-everglade-100: #dff0e4;
  --color-everglade-200: #c9decf;
  --color-everglade-300: #afc7b6;
  --color-everglade-400: #8da795;
  --color-everglade-500: #718b79;
  --color-everglade-600: #566f5e;
  --color-everglade-700: #415748;
  --color-everglade-800: #2c4434;
  --color-everglade-900: #233328;
  --color-everglade-950: #142018;
  --color-bitter-melon: #d1d1b0;
  --color-bitter-melon-50: #f0f1dd;
  --color-bitter-melon-100: #e5e5cf;
  --color-bitter-melon-200: #d1d1b0;
  --color-bitter-melon-300: #bcbc9f;
  --color-bitter-melon-400: #9e9e7f;
  --color-bitter-melon-500: #848466;
  --color-bitter-melon-600: #6c6b4e;
  --color-bitter-melon-700: #56563b;
  --color-bitter-melon-800: #44442d;
  --color-bitter-melon-900: #343420;
  --color-bitter-melon-950: #202012;
  --color-magnolia: #fff9e2;
  --color-magnolia-50: #fff9e2;
  --color-magnolia-100: #f2eee1;
  --color-magnolia-200: #dedaca;
  --color-magnolia-300: #c8c3b0;
  --color-magnolia-400: #a8a38e;
  --color-magnolia-500: #8c8772;
  --color-magnolia-600: #716c58;
  --color-magnolia-700: #5a5544;
  --color-magnolia-800: #474233;
  --color-magnolia-900: #363326;
  --color-magnolia-950: #221f16;
  --color-toad-king: #4d6d55;
  --color-toad-king-50: #e8fbec;
  --color-toad-king-100: #daf1df;
  --color-toad-king-200: #c2ddc8;
  --color-toad-king-300: #a7c6ae;
  --color-toad-king-400: #85a68c;
  --color-toad-king-500: #688970;
  --color-toad-king-600: #4d6d55;
  --color-toad-king-700: #3b5742;
  --color-toad-king-800: #2c4432;
  --color-toad-king-900: #203526;
  --color-toad-king-950: #122116;
  --color-moonscape: #856e81;
  --color-moonscape-50: #fff0fc;
  --color-moonscape-100: #f8e8f5;
  --color-moonscape-200: #e8d5e4;
  --color-moonscape-300: #d4bfd0;
  --color-moonscape-400: #b8a1b4;
  --color-moonscape-500: #9e879a;
  --color-moonscape-600: #856e81;
  --color-moonscape-700: #6b5667;
  --color-moonscape-800: #544251;
  --color-moonscape-900: #41323f;
  --color-moonscape-950: #291e27;
  --color-moon-veil: #9399ba;
  --color-moon-veil-50: #eff2ff;
  --color-moon-veil-100: #e2e6fd;
  --color-moon-veil-200: #ccd1ec;
  --color-moon-veil-300: #b4bad8;
  --color-moon-veil-400: #9399ba;
  --color-moon-veil-500: #797f9f;
  --color-moon-veil-600: #616684;
  --color-moon-veil-700: #4c506b;
  --color-moon-veil-800: #3b3f56;
  --color-moon-veil-900: #2d3044;
  --color-moon-veil-950: #1c1e2d;
}