Chocolate Truffle to Innocent Snowdrop color palette

5B3137Chocolate Truffle 686340Eat Your Greens BB6D88Pinky Pickle 6CBDAESereni Teal C3C1FEInnocent Snowdrop

Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Truffle to Innocent Snowdrop is a 5-color warm, vintage palette: #5B3137 (Chocolate Truffle), #686340 (Eat Your Greens), #BB6D88 (Pinky Pickle), #6CBDAE (Sereni Teal), #C3C1FE (Innocent Snowdrop). It mixes brown, pink, turquoise, purple tones and feels warm overall. The strongest text pairing is #5B3137 on #C3C1FE with a contrast ratio of 6.38:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Truffle	rgb(91, 49, 55)	hsl(351, 30%, 27%)
Eat Your Greens	rgb(104, 99, 64)	hsl(53, 24%, 33%)
Pinky Pickle	rgb(187, 109, 136)	hsl(339, 36%, 58%)
Sereni Teal	rgb(108, 189, 174)	hsl(169, 38%, 58%)
Innocent Snowdrop	rgb(195, 193, 254)	hsl(242, 97%, 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.

Aa6.38:1 Good#5B3137 on #C3C1FE
Aa6.38:1 Good#C3C1FE on #5B3137
Aa4.91:1 Good#5B3137 on #6CBDAE
Aa4.91:1 Good#6CBDAE on #5B3137
Aa3.59:1 Poor#686340 on #C3C1FE
Aa3.59:1 Poor#C3C1FE on #686340

Color blindness preview

CSS variables

/* Chocolate Truffle to Innocent Snowdrop — https://swatchly.xyz/palette/5b3137-686340-bb6d88-6cbdae-c3c1fe */
:root {
  --chocolate-truffle: #5b3137;
  --eat-your-greens: #686340;
  --pinky-pickle: #bb6d88;
  --sereni-teal: #6cbdae;
  --innocent-snowdrop: #c3c1fe;
}

Tailwind CSS v4

/* Chocolate Truffle to Innocent Snowdrop — https://swatchly.xyz/palette/5b3137-686340-bb6d88-6cbdae-c3c1fe */
@theme {
  --color-chocolate-truffle: #5b3137;
  --color-chocolate-truffle-50: #fff1f2;
  --color-chocolate-truffle-100: #ffe3e6;
  --color-chocolate-truffle-200: #f4ccd0;
  --color-chocolate-truffle-300: #e0b3b8;
  --color-chocolate-truffle-400: #c29297;
  --color-chocolate-truffle-500: #a6757b;
  --color-chocolate-truffle-600: #885b61;
  --color-chocolate-truffle-700: #6e464b;
  --color-chocolate-truffle-800: #5b3137;
  --color-chocolate-truffle-900: #44272b;
  --color-chocolate-truffle-950: #2b1719;
  --color-eat-your-greens: #686340;
  --color-eat-your-greens-50: #f9f6e1;
  --color-eat-your-greens-100: #eeead2;
  --color-eat-your-greens-200: #d9d5b8;
  --color-eat-your-greens-300: #c1bd9c;
  --color-eat-your-greens-400: #a19c78;
  --color-eat-your-greens-500: #847f5b;
  --color-eat-your-greens-600: #686340;
  --color-eat-your-greens-700: #534e30;
  --color-eat-your-greens-800: #413d23;
  --color-eat-your-greens-900: #322f19;
  --color-eat-your-greens-950: #1f1d0d;
  --color-pinky-pickle: #bb6d88;
  --color-pinky-pickle-50: #fff2f5;
  --color-pinky-pickle-100: #ffe4ec;
  --color-pinky-pickle-200: #ffc7d8;
  --color-pinky-pickle-300: #f2abc2;
  --color-pinky-pickle-400: #d689a3;
  --color-pinky-pickle-500: #bb6d88;
  --color-pinky-pickle-600: #9d536d;
  --color-pinky-pickle-700: #813e56;
  --color-pinky-pickle-800: #672d43;
  --color-pinky-pickle-900: #522033;
  --color-pinky-pickle-950: #35121f;
  --color-sereni-teal: #6cbdae;
  --color-sereni-teal-50: #e7fff9;
  --color-sereni-teal-100: #cefcf2;
  --color-sereni-teal-200: #b5ece0;
  --color-sereni-teal-300: #98d9cc;
  --color-sereni-teal-400: #6cbdae;
  --color-sereni-teal-500: #4e9f91;
  --color-sereni-teal-600: #2e8274;
  --color-sereni-teal-700: #14685c;
  --color-sereni-teal-800: #005147;
  --color-sereni-teal-900: #003e36;
  --color-sereni-teal-950: #002620;
  --color-innocent-snowdrop: #c3c1fe;
  --color-innocent-snowdrop-50: #f8f8ff;
  --color-innocent-snowdrop-100: #efefff;
  --color-innocent-snowdrop-200: #dadaff;
  --color-innocent-snowdrop-300: #c3c1fe;
  --color-innocent-snowdrop-400: #a3a1d8;
  --color-innocent-snowdrop-500: #8683bc;
  --color-innocent-snowdrop-600: #6b689e;
  --color-innocent-snowdrop-700: #545082;
  --color-innocent-snowdrop-800: #403d68;
  --color-innocent-snowdrop-900: #302d51;
  --color-innocent-snowdrop-950: #1d1b35;
}