Mental Floss to Walkie Chalkie Color Palette

About this palette

Mental Floss to Walkie Chalkie is a 5-color muted palette: #DEB2BE (Mental Floss), #4D7666 (Green Sleeves), #74A991 (Catnip), #513C46 (Pitch Black), #FFF5FA (Walkie Chalkie). It mixes pink, turquoise, green, gray, white tones and feels cool overall. The strongest text pairing is #513C46 on #FFF5FA with a contrast ratio of 9.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mental Floss	rgb(222, 178, 190)	hsl(344, 40%, 78%)
Green Sleeves	rgb(77, 118, 102)	hsl(157, 21%, 38%)
Catnip	rgb(116, 169, 145)	hsl(153, 24%, 56%)
Pitch Black	rgb(81, 60, 70)	hsl(331, 15%, 28%)
Walkie Chalkie	rgb(255, 245, 250)	hsl(330, 100%, 98%)

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.

Aa9.45:1 Very good#513C46 on #FFF5FA
Aa9.45:1 Very good#FFF5FA on #513C46
Aa5.38:1 Good#DEB2BE on #513C46
Aa5.38:1 Good#513C46 on #DEB2BE
Aa4.80:1 Good#4D7666 on #FFF5FA
Aa4.80:1 Good#FFF5FA on #4D7666
Aa3.75:1 Poor#74A991 on #513C46
Aa3.75:1 Poor#513C46 on #74A991

Color blindness preview

CSS variables

/* Mental Floss to Walkie Chalkie — https://swatchly.xyz/palette/deb2be-4d7666-74a991-513c46-fff5fa */
:root {
  --mental-floss: #deb2be;
  --green-sleeves: #4d7666;
  --catnip: #74a991;
  --pitch-black: #513c46;
  --walkie-chalkie: #fff5fa;
}

Tailwind CSS v4

/* Mental Floss to Walkie Chalkie — https://swatchly.xyz/palette/deb2be-4d7666-74a991-513c46-fff5fa */
@theme {
  --color-mental-floss: #deb2be;
  --color-mental-floss-50: #fff0f4;
  --color-mental-floss-100: #ffe2e9;
  --color-mental-floss-200: #eeccd5;
  --color-mental-floss-300: #deb2be;
  --color-mental-floss-400: #bd949f;
  --color-mental-floss-500: #a17884;
  --color-mental-floss-600: #855f6a;
  --color-mental-floss-700: #6c4a54;
  --color-mental-floss-800: #563841;
  --color-mental-floss-900: #442a32;
  --color-mental-floss-950: #2b191f;
  --color-green-sleeves: #4d7666;
  --color-green-sleeves-50: #e4fcf1;
  --color-green-sleeves-100: #d7f3e7;
  --color-green-sleeves-200: #c0e0d3;
  --color-green-sleeves-300: #a6cbbb;
  --color-green-sleeves-400: #83ac9b;
  --color-green-sleeves-500: #679180;
  --color-green-sleeves-600: #4d7666;
  --color-green-sleeves-700: #395e50;
  --color-green-sleeves-800: #2a4a3e;
  --color-green-sleeves-900: #1e392f;
  --color-green-sleeves-950: #10241c;
  --color-catnip: #74a991;
  --color-catnip-50: #ddfced;
  --color-catnip-100: #cff2e1;
  --color-catnip-200: #b5decb;
  --color-catnip-300: #99c8b2;
  --color-catnip-400: #74a991;
  --color-catnip-500: #5a8e77;
  --color-catnip-600: #42745e;
  --color-catnip-700: #2f5d4a;
  --color-catnip-800: #214a39;
  --color-catnip-900: #163a2c;
  --color-catnip-950: #0b251b;
  --color-pitch-black: #513c46;
  --color-pitch-black-50: #fff1f7;
  --color-pitch-black-100: #f7e6ed;
  --color-pitch-black-200: #e5d1da;
  --color-pitch-black-300: #d0bac4;
  --color-pitch-black-400: #b29aa5;
  --color-pitch-black-500: #977f8a;
  --color-pitch-black-600: #7c656f;
  --color-pitch-black-700: #644f59;
  --color-pitch-black-800: #513c46;
  --color-pitch-black-900: #3d2e35;
  --color-pitch-black-950: #271c21;
  --color-walkie-chalkie: #fff5fa;
  --color-walkie-chalkie-50: #fff5fa;
  --color-walkie-chalkie-100: #f2ecef;
  --color-walkie-chalkie-200: #ded7db;
  --color-walkie-chalkie-300: #c8c0c4;
  --color-walkie-chalkie-400: #a8a0a4;
  --color-walkie-chalkie-500: #8d8488;
  --color-walkie-chalkie-600: #71696d;
  --color-walkie-chalkie-700: #5a5357;
  --color-walkie-chalkie-800: #474044;
  --color-walkie-chalkie-900: #373134;
  --color-walkie-chalkie-950: #221e20;
}