Start generating

Marshland to Buttercream color palette

21302AMarshland554E6BIntergalactic806355Chivalrous Walrus73998AYuccaB7ABCCPastel LilacF0DECFButtercream
Open in generator Export PNG, PDF, ASE…

About this palette

Marshland to Buttercream is a 6-color muted palette: #21302A (Marshland), #554E6B (Intergalactic), #806355 (Chivalrous Walrus), #73998A (Yucca), #B7ABCC (Pastel Lilac), #F0DECF (Buttercream). It mixes gray, purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #21302A on #F0DECF with a contrast ratio of 10.56:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Marshlandrgb(33, 48, 42)hsl(156, 19%, 16%)
Intergalacticrgb(85, 78, 107)hsl(254, 16%, 36%)
Chivalrous Walrusrgb(128, 99, 85)hsl(20, 20%, 42%)
Yuccargb(115, 153, 138)hsl(156, 16%, 53%)
Pastel Lilacrgb(183, 171, 204)hsl(262, 24%, 74%)
Buttercreamrgb(240, 222, 207)hsl(27, 52%, 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.

  • Aa10.56:1 Very good#21302A on #F0DECF
  • Aa10.56:1 Very good#F0DECF on #21302A
  • Aa6.38:1 Good#21302A on #B7ABCC
  • Aa6.38:1 Good#B7ABCC on #21302A
  • Aa5.97:1 Good#554E6B on #F0DECF
  • Aa5.97:1 Good#F0DECF on #554E6B
  • Aa4.37:1 Poor#21302A on #73998A
  • Aa4.37:1 Poor#73998A on #21302A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Marshland to Buttercream — https://swatchly.xyz/palette/21302a-554e6b-806355-73998a-b7abcc-f0decf */
:root {
  --marshland: #21302a;
  --intergalactic: #554e6b;
  --chivalrous-walrus: #806355;
  --yucca: #73998a;
  --pastel-lilac: #b7abcc;
  --buttercream: #f0decf;
}

Tailwind CSS v4

/* Marshland to Buttercream — https://swatchly.xyz/palette/21302a-554e6b-806355-73998a-b7abcc-f0decf */
@theme {
  --color-marshland: #21302a;
  --color-marshland-50: #eef8f3;
  --color-marshland-100: #e3eee9;
  --color-marshland-200: #cddbd5;
  --color-marshland-300: #b5c5be;
  --color-marshland-400: #94a59d;
  --color-marshland-500: #778881;
  --color-marshland-600: #5c6c65;
  --color-marshland-700: #46544e;
  --color-marshland-800: #33403b;
  --color-marshland-900: #21302a;
  --color-marshland-950: #151c19;
  --color-intergalactic: #554e6b;
  --color-intergalactic-50: #f6f3ff;
  --color-intergalactic-100: #ece8fd;
  --color-intergalactic-200: #d8d3ed;
  --color-intergalactic-300: #c2bbd8;
  --color-intergalactic-400: #a29bba;
  --color-intergalactic-500: #867f9f;
  --color-intergalactic-600: #6c6582;
  --color-intergalactic-700: #554e6b;
  --color-intergalactic-800: #423d54;
  --color-intergalactic-900: #332e42;
  --color-intergalactic-950: #1f1c2a;
  --color-chivalrous-walrus: #806355;
  --color-chivalrous-walrus-50: #fff2ec;
  --color-chivalrous-walrus-100: #fbe6dc;
  --color-chivalrous-walrus-200: #ead1c5;
  --color-chivalrous-walrus-300: #d5b9ac;
  --color-chivalrous-walrus-400: #b7998b;
  --color-chivalrous-walrus-500: #9c7d6f;
  --color-chivalrous-walrus-600: #806355;
  --color-chivalrous-walrus-700: #674e41;
  --color-chivalrous-walrus-800: #523c31;
  --color-chivalrous-walrus-900: #402d24;
  --color-chivalrous-walrus-950: #291b15;
  --color-yucca: #73998a;
  --color-yucca-50: #e7fdf4;
  --color-yucca-100: #ddf5eb;
  --color-yucca-200: #c8e4d8;
  --color-yucca-300: #b0d0c3;
  --color-yucca-400: #8fb3a4;
  --color-yucca-500: #73998a;
  --color-yucca-600: #577c6e;
  --color-yucca-700: #416356;
  --color-yucca-800: #304e42;
  --color-yucca-900: #223b32;
  --color-yucca-950: #12251e;
  --color-pastel-lilac: #b7abcc;
  --color-pastel-lilac-50: #f0e9fe;
  --color-pastel-lilac-100: #e4dcf4;
  --color-pastel-lilac-200: #cfc5e0;
  --color-pastel-lilac-300: #b7abcc;
  --color-pastel-lilac-400: #9a8fae;
  --color-pastel-lilac-500: #827695;
  --color-pastel-lilac-600: #6a5f7c;
  --color-pastel-lilac-700: #554b65;
  --color-pastel-lilac-800: #443b52;
  --color-pastel-lilac-900: #362f42;
  --color-pastel-lilac-950: #221c2a;
  --color-buttercream: #f0decf;
  --color-buttercream-50: #f6ebe2;
  --color-buttercream-100: #f0decf;
  --color-buttercream-200: #dbcdc1;
  --color-buttercream-300: #c7b8ab;
  --color-buttercream-400: #aa9a8c;
  --color-buttercream-500: #908072;
  --color-buttercream-600: #76675a;
  --color-buttercream-700: #605247;
  --color-buttercream-800: #4c4036;
  --color-buttercream-900: #3b3128;
  --color-buttercream-950: #251e17;
}

Similar palettes