Start generating

Toasted Marshmallow Fluff to Soulless color palette

FDF8EAToasted Marshmallow FluffD3C3A5Dune8BA2B8Grauzone557180Shipyard55362BMonkey Island1C1412Soulless
Open in generator Export PNG, PDF, ASE…

About this palette

Toasted Marshmallow Fluff to Soulless is a 6-color muted palette: #FDF8EA (Toasted Marshmallow Fluff), #D3C3A5 (Dune), #8BA2B8 (Grauzone), #557180 (Shipyard), #55362B (Monkey Island), #1C1412 (Soulless). It mixes white, yellow, blue, brown, black tones and feels balanced overall. The strongest text pairing is #FDF8EA on #1C1412 with a contrast ratio of 17.09:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Toasted Marshmallow Fluffrgb(253, 248, 234)hsl(44, 83%, 95%)
Dunergb(211, 195, 165)hsl(39, 34%, 74%)
Grauzonergb(139, 162, 184)hsl(209, 24%, 63%)
Shipyardrgb(85, 113, 128)hsl(201, 20%, 42%)
Monkey Islandrgb(85, 54, 43)hsl(16, 33%, 25%)
Soullessrgb(28, 20, 18)hsl(12, 22%, 9%)

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.

  • Aa17.09:1 Super#FDF8EA on #1C1412
  • Aa17.09:1 Super#1C1412 on #FDF8EA
  • Aa10.46:1 Very good#D3C3A5 on #1C1412
  • Aa10.46:1 Very good#1C1412 on #D3C3A5
  • Aa10.16:1 Very good#FDF8EA on #55362B
  • Aa10.16:1 Very good#55362B on #FDF8EA
  • Aa6.87:1 Good#8BA2B8 on #1C1412
  • Aa6.87:1 Good#1C1412 on #8BA2B8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Toasted Marshmallow Fluff to Soulless — https://swatchly.xyz/palette/fdf8ea-d3c3a5-8ba2b8-557180-55362b-1c1412 */
:root {
  --toasted-marshmallow-fluff: #fdf8ea;
  --dune: #d3c3a5;
  --grauzone: #8ba2b8;
  --shipyard: #557180;
  --monkey-island: #55362b;
  --soulless: #1c1412;
}

Tailwind CSS v4

/* Toasted Marshmallow Fluff to Soulless — https://swatchly.xyz/palette/fdf8ea-d3c3a5-8ba2b8-557180-55362b-1c1412 */
@theme {
  --color-toasted-marshmallow-fluff: #fdf8ea;
  --color-toasted-marshmallow-fluff-50: #fdf8ea;
  --color-toasted-marshmallow-fluff-100: #f0eee5;
  --color-toasted-marshmallow-fluff-200: #ddd9cf;
  --color-toasted-marshmallow-fluff-300: #c6c2b7;
  --color-toasted-marshmallow-fluff-400: #a7a296;
  --color-toasted-marshmallow-fluff-500: #8b867a;
  --color-toasted-marshmallow-fluff-600: #706c60;
  --color-toasted-marshmallow-fluff-700: #59554a;
  --color-toasted-marshmallow-fluff-800: #464239;
  --color-toasted-marshmallow-fluff-900: #36332b;
  --color-toasted-marshmallow-fluff-950: #211f19;
  --color-dune: #d3c3a5;
  --color-dune-50: #fff6e6;
  --color-dune-100: #f7edda;
  --color-dune-200: #e5dac4;
  --color-dune-300: #d3c3a5;
  --color-dune-400: #b2a387;
  --color-dune-500: #96876a;
  --color-dune-600: #7a6c51;
  --color-dune-700: #62553c;
  --color-dune-800: #4d412c;
  --color-dune-900: #3b311f;
  --color-dune-950: #251e11;
  --color-grauzone: #8ba2b8;
  --color-grauzone-50: #ecf6ff;
  --color-grauzone-100: #ddecfb;
  --color-grauzone-200: #c6d8ea;
  --color-grauzone-300: #adc2d5;
  --color-grauzone-400: #8ba2b8;
  --color-grauzone-500: #71879c;
  --color-grauzone-600: #586d81;
  --color-grauzone-700: #435669;
  --color-grauzone-800: #334453;
  --color-grauzone-900: #263441;
  --color-grauzone-950: #16202a;
  --color-shipyard: #557180;
  --color-shipyard-50: #eaf8ff;
  --color-shipyard-100: #dceff9;
  --color-shipyard-200: #c5dce8;
  --color-shipyard-300: #acc6d4;
  --color-shipyard-400: #8ba7b6;
  --color-shipyard-500: #6f8c9b;
  --color-shipyard-600: #557180;
  --color-shipyard-700: #415a67;
  --color-shipyard-800: #304652;
  --color-shipyard-900: #233640;
  --color-shipyard-950: #142129;
  --color-monkey-island: #55362b;
  --color-monkey-island-50: #fff2ed;
  --color-monkey-island-100: #fee5dc;
  --color-monkey-island-200: #eed0c6;
  --color-monkey-island-300: #d9b8ac;
  --color-monkey-island-400: #bb978a;
  --color-monkey-island-500: #9e7b6e;
  --color-monkey-island-600: #826054;
  --color-monkey-island-700: #684a40;
  --color-monkey-island-800: #55362b;
  --color-monkey-island-900: #402a22;
  --color-monkey-island-950: #281914;
  --color-soulless: #1c1412;
  --color-soulless-50: #faf3f2;
  --color-soulless-100: #f1e9e7;
  --color-soulless-200: #ded5d3;
  --color-soulless-300: #c8bebc;
  --color-soulless-400: #aa9f9c;
  --color-soulless-500: #8c817f;
  --color-soulless-600: #706563;
  --color-soulless-700: #564e4b;
  --color-soulless-800: #413a38;
  --color-soulless-900: #2f2928;
  --color-soulless-950: #1c1412;
}

Similar palettes