Start generating

Cotton Boll to Midnight Shadow color palette

EAF1FFCotton Boll1C2519Underworld7D8E7EMummy’s TombDDC6C8Perfume Cloud5E3B3BMonkey Island596879Midnight Shadow
Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Midnight Shadow is a 6-color muted palette: #EAF1FF (Cotton Boll), #1C2519 (Underworld), #7D8E7E (Mummy’s Tomb), #DDC6C8 (Perfume Cloud), #5E3B3B (Monkey Island), #596879 (Midnight Shadow). It mixes white, gray, brown tones and feels warm overall. The strongest text pairing is #EAF1FF on #1C2519 with a contrast ratio of 13.95:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cotton Bollrgb(234, 241, 255)hsl(220, 100%, 96%)
Underworldrgb(28, 37, 25)hsl(105, 19%, 12%)
Mummy’s Tombrgb(125, 142, 126)hsl(124, 7%, 52%)
Perfume Cloudrgb(221, 198, 200)hsl(355, 25%, 82%)
Monkey Islandrgb(94, 59, 59)hsl(0, 23%, 30%)
Midnight Shadowrgb(89, 104, 121)hsl(212, 15%, 41%)

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.

  • Aa13.95:1 Super#EAF1FF on #1C2519
  • Aa13.95:1 Super#1C2519 on #EAF1FF
  • Aa9.78:1 Very good#1C2519 on #DDC6C8
  • Aa9.78:1 Very good#DDC6C8 on #1C2519
  • Aa8.56:1 Very good#EAF1FF on #5E3B3B
  • Aa8.56:1 Very good#5E3B3B on #EAF1FF
  • Aa6.00:1 Good#DDC6C8 on #5E3B3B
  • Aa6.00:1 Good#5E3B3B on #DDC6C8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cotton Boll to Midnight Shadow — https://swatchly.xyz/palette/eaf1ff-1c2519-7d8e7e-ddc6c8-5e3b3b-596879 */
:root {
  --cotton-boll: #eaf1ff;
  --underworld: #1c2519;
  --mummy-s-tomb: #7d8e7e;
  --perfume-cloud: #ddc6c8;
  --monkey-island: #5e3b3b;
  --midnight-shadow: #596879;
}

Tailwind CSS v4

/* Cotton Boll to Midnight Shadow — https://swatchly.xyz/palette/eaf1ff-1c2519-7d8e7e-ddc6c8-5e3b3b-596879 */
@theme {
  --color-cotton-boll: #eaf1ff;
  --color-cotton-boll-50: #eaf1ff;
  --color-cotton-boll-100: #e3e8f1;
  --color-cotton-boll-200: #d0d5df;
  --color-cotton-boll-300: #b9bfcb;
  --color-cotton-boll-400: #9aa0ad;
  --color-cotton-boll-500: #7f8692;
  --color-cotton-boll-600: #666c78;
  --color-cotton-boll-700: #505560;
  --color-cotton-boll-800: #3e424c;
  --color-cotton-boll-900: #2f333b;
  --color-cotton-boll-950: #1c1f25;
  --color-underworld: #1c2519;
  --color-underworld-50: #f1f8ee;
  --color-underworld-100: #e6eee4;
  --color-underworld-200: #d2dbcf;
  --color-underworld-300: #bac4b7;
  --color-underworld-400: #9aa597;
  --color-underworld-500: #7f8b7c;
  --color-underworld-600: #667162;
  --color-underworld-700: #515a4d;
  --color-underworld-800: #3f473c;
  --color-underworld-900: #31382e;
  --color-underworld-950: #1c2519;
  --color-mummy-s-tomb: #7d8e7e;
  --color-mummy-s-tomb-50: #eff9ef;
  --color-mummy-s-tomb-100: #e4f0e5;
  --color-mummy-s-tomb-200: #d0ddd0;
  --color-mummy-s-tomb-300: #b8c8b9;
  --color-mummy-s-tomb-400: #98a999;
  --color-mummy-s-tomb-500: #7d8e7e;
  --color-mummy-s-tomb-600: #637364;
  --color-mummy-s-tomb-700: #4d5b4e;
  --color-mummy-s-tomb-800: #3b473b;
  --color-mummy-s-tomb-900: #2c372d;
  --color-mummy-s-tomb-950: #1a221b;
  --color-perfume-cloud: #ddc6c8;
  --color-perfume-cloud-50: #f8eaeb;
  --color-perfume-cloud-100: #eddddf;
  --color-perfume-cloud-200: #ddc6c8;
  --color-perfume-cloud-300: #c6b2b4;
  --color-perfume-cloud-400: #aa9496;
  --color-perfume-cloud-500: #907b7d;
  --color-perfume-cloud-600: #776365;
  --color-perfume-cloud-700: #604e50;
  --color-perfume-cloud-800: #4d3e3f;
  --color-perfume-cloud-900: #3c2f30;
  --color-perfume-cloud-950: #261c1d;
  --color-monkey-island: #5e3b3b;
  --color-monkey-island-50: #fff1f1;
  --color-monkey-island-100: #ffe4e3;
  --color-monkey-island-200: #efcece;
  --color-monkey-island-300: #dcb7b7;
  --color-monkey-island-400: #bf9897;
  --color-monkey-island-500: #a47d7c;
  --color-monkey-island-600: #896363;
  --color-monkey-island-700: #704e4e;
  --color-monkey-island-800: #5e3b3b;
  --color-monkey-island-900: #472e2e;
  --color-monkey-island-950: #2e1c1c;
  --color-midnight-shadow: #596879;
  --color-midnight-shadow-50: #eef6ff;
  --color-midnight-shadow-100: #e1ebf8;
  --color-midnight-shadow-200: #cad7e6;
  --color-midnight-shadow-300: #b1c0d0;
  --color-midnight-shadow-400: #909fb1;
  --color-midnight-shadow-500: #748395;
  --color-midnight-shadow-600: #596879;
  --color-midnight-shadow-700: #455261;
  --color-midnight-shadow-800: #35404d;
  --color-midnight-shadow-900: #28313c;
  --color-midnight-shadow-950: #181e26;
}

Similar palettes