Airy Fields to Marshland color palette

DDE2C1Airy Fields B9A1BBPastel Purple 767992Stormy Horizon 515474Majestic Magic 2D311EMarshland

About this palette

Airy Fields to Marshland is a 5-color muted, cool palette: #DDE2C1 (Airy Fields), #B9A1BB (Pastel Purple), #767992 (Stormy Horizon), #515474 (Majestic Magic), #2D311E (Marshland). It mixes green, pink, purple, gray tones and feels cool overall. The strongest text pairing is #DDE2C1 on #2D311E with a contrast ratio of 10.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Airy Fields	rgb(221, 226, 193)	hsl(69, 36%, 82%)
Pastel Purple	rgb(185, 161, 187)	hsl(295, 16%, 68%)
Stormy Horizon	rgb(118, 121, 146)	hsl(234, 11%, 52%)
Majestic Magic	rgb(81, 84, 116)	hsl(235, 18%, 39%)
Marshland	rgb(45, 49, 30)	hsl(73, 24%, 15%)

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.02:1 Very good#DDE2C1 on #2D311E
Aa10.02:1 Very good#2D311E on #DDE2C1
Aa5.66:1 Good#B9A1BB on #2D311E
Aa5.66:1 Good#2D311E on #B9A1BB
Aa5.48:1 Good#DDE2C1 on #515474
Aa5.48:1 Good#515474 on #DDE2C1
Aa3.20:1 Poor#DDE2C1 on #767992
Aa3.20:1 Poor#767992 on #DDE2C1

Color blindness preview

CSS variables

/* Airy Fields to Marshland — https://swatchly.xyz/palette/dde2c1-b9a1bb-767992-515474-2d311e */
:root {
  --airy-fields: #dde2c1;
  --pastel-purple: #b9a1bb;
  --stormy-horizon: #767992;
  --majestic-magic: #515474;
  --marshland: #2d311e;
}

Tailwind CSS v4

/* Airy Fields to Marshland — https://swatchly.xyz/palette/dde2c1-b9a1bb-767992-515474-2d311e */
@theme {
  --color-airy-fields: #dde2c1;
  --color-airy-fields-50: #f9fceb;
  --color-airy-fields-100: #f0f3e0;
  --color-airy-fields-200: #dde2c1;
  --color-airy-fields-300: #c5c9af;
  --color-airy-fields-400: #a5a98b;
  --color-airy-fields-500: #888d6e;
  --color-airy-fields-600: #6d7154;
  --color-airy-fields-700: #55593f;
  --color-airy-fields-800: #42452e;
  --color-airy-fields-900: #323521;
  --color-airy-fields-950: #1f2113;
  --color-pastel-purple: #b9a1bb;
  --color-pastel-purple-50: #fef5ff;
  --color-pastel-purple-100: #f9eafa;
  --color-pastel-purple-200: #e9d7ea;
  --color-pastel-purple-300: #d5c1d7;
  --color-pastel-purple-400: #b9a1bb;
  --color-pastel-purple-500: #9b849d;
  --color-pastel-purple-600: #7f6981;
  --color-pastel-purple-700: #655167;
  --color-pastel-purple-800: #4f3e51;
  --color-pastel-purple-900: #3d2e3e;
  --color-pastel-purple-950: #251b26;
  --color-stormy-horizon: #767992;
  --color-stormy-horizon-50: #f0f2ff;
  --color-stormy-horizon-100: #e3e6f8;
  --color-stormy-horizon-200: #cdd0e5;
  --color-stormy-horizon-300: #b4b7cf;
  --color-stormy-horizon-400: #9396af;
  --color-stormy-horizon-500: #767992;
  --color-stormy-horizon-600: #5e6178;
  --color-stormy-horizon-700: #4a4d61;
  --color-stormy-horizon-800: #3a3c4e;
  --color-stormy-horizon-900: #2d2e3e;
  --color-stormy-horizon-950: #1c1d28;
  --color-majestic-magic: #515474;
  --color-majestic-magic-50: #f3f4ff;
  --color-majestic-magic-100: #e7eaff;
  --color-majestic-magic-200: #d2d6f2;
  --color-majestic-magic-300: #bbbfdf;
  --color-majestic-magic-400: #9ca0c2;
  --color-majestic-magic-500: #8184a7;
  --color-majestic-magic-600: #676a8b;
  --color-majestic-magic-700: #515474;
  --color-majestic-magic-800: #3f415b;
  --color-majestic-magic-900: #303248;
  --color-majestic-magic-950: #1d1e2e;
  --color-marshland: #2d311e;
  --color-marshland-50: #f4f7ea;
  --color-marshland-100: #eaedde;
  --color-marshland-200: #d6dac8;
  --color-marshland-300: #bfc4b0;
  --color-marshland-400: #9ea48e;
  --color-marshland-500: #828772;
  --color-marshland-600: #676c57;
  --color-marshland-700: #505542;
  --color-marshland-800: #3d4131;
  --color-marshland-900: #2d311e;
  --color-marshland-950: #1b1d14;
}