Mellow Mint to Tangent Periwinkle color palette

DFEEBFMellow Mint 7564B3Simply Purple 8BCCBAMint Twist 341C25Bruised Plum 4E4E77Tangent Periwinkle

About this palette

Mellow Mint to Tangent Periwinkle is a 5-color cool palette: #DFEEBF (Mellow Mint), #7564B3 (Simply Purple), #8BCCBA (Mint Twist), #341C25 (Bruised Plum), #4E4E77 (Tangent Periwinkle). It mixes green, purple, turquoise, red tones and feels cool overall. The strongest text pairing is #DFEEBF on #341C25 with a contrast ratio of 12.79:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mellow Mint	rgb(223, 238, 191)	hsl(79, 58%, 84%)
Simply Purple	rgb(117, 100, 179)	hsl(253, 34%, 55%)
Mint Twist	rgb(139, 204, 186)	hsl(163, 39%, 67%)
Bruised Plum	rgb(52, 28, 37)	hsl(338, 30%, 16%)
Tangent Periwinkle	rgb(78, 78, 119)	hsl(240, 21%, 39%)

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.

Aa12.79:1 Super#DFEEBF on #341C25
Aa12.79:1 Super#341C25 on #DFEEBF
Aa8.55:1 Very good#8BCCBA on #341C25
Aa8.55:1 Very good#341C25 on #8BCCBA
Aa6.39:1 Good#DFEEBF on #4E4E77
Aa6.39:1 Good#4E4E77 on #DFEEBF
Aa4.27:1 Poor#8BCCBA on #4E4E77
Aa4.27:1 Poor#4E4E77 on #8BCCBA

Color blindness preview

CSS variables

/* Mellow Mint to Tangent Periwinkle — https://swatchly.xyz/palette/dfeebf-7564b3-8bccba-341c25-4e4e77 */
:root {
  --mellow-mint: #dfeebf;
  --simply-purple: #7564b3;
  --mint-twist: #8bccba;
  --bruised-plum: #341c25;
  --tangent-periwinkle: #4e4e77;
}

Tailwind CSS v4

/* Mellow Mint to Tangent Periwinkle — https://swatchly.xyz/palette/dfeebf-7564b3-8bccba-341c25-4e4e77 */
@theme {
  --color-mellow-mint: #dfeebf;
  --color-mellow-mint-50: #edf6db;
  --color-mellow-mint-100: #dfeebf;
  --color-mellow-mint-200: #ced9b6;
  --color-mellow-mint-300: #b8c49d;
  --color-mellow-mint-400: #99a67b;
  --color-mellow-mint-500: #7e8b60;
  --color-mellow-mint-600: #657148;
  --color-mellow-mint-700: #505b35;
  --color-mellow-mint-800: #3d4726;
  --color-mellow-mint-900: #2f371a;
  --color-mellow-mint-950: #1c220e;
  --color-simply-purple: #7564b3;
  --color-simply-purple-50: #f5f3ff;
  --color-simply-purple-100: #ece9ff;
  --color-simply-purple-200: #dad4ff;
  --color-simply-purple-300: #c6baff;
  --color-simply-purple-400: #a899e8;
  --color-simply-purple-500: #8e7ecf;
  --color-simply-purple-600: #7564b3;
  --color-simply-purple-700: #5d4d95;
  --color-simply-purple-800: #493a79;
  --color-simply-purple-900: #382b61;
  --color-simply-purple-950: #231940;
  --color-mint-twist: #8bccba;
  --color-mint-twist-50: #d8fcf1;
  --color-mint-twist-100: #caf3e6;
  --color-mint-twist-200: #afe0d2;
  --color-mint-twist-300: #8bccba;
  --color-mint-twist-400: #6fac9c;
  --color-mint-twist-500: #529281;
  --color-mint-twist-600: #387768;
  --color-mint-twist-700: #256052;
  --color-mint-twist-800: #174c40;
  --color-mint-twist-900: #0d3b31;
  --color-mint-twist-950: #04251e;
  --color-bruised-plum: #341c25;
  --color-bruised-plum-50: #fff1f5;
  --color-bruised-plum-100: #fae5eb;
  --color-bruised-plum-200: #e9d0d8;
  --color-bruised-plum-300: #d4b8c1;
  --color-bruised-plum-400: #b698a2;
  --color-bruised-plum-500: #9c7e88;
  --color-bruised-plum-600: #82656e;
  --color-bruised-plum-700: #6a5059;
  --color-bruised-plum-800: #563f47;
  --color-bruised-plum-900: #453138;
  --color-bruised-plum-950: #341c25;
  --color-tangent-periwinkle: #4e4e77;
  --color-tangent-periwinkle-50: #f3f4ff;
  --color-tangent-periwinkle-100: #e8e9ff;
  --color-tangent-periwinkle-200: #d2d4f8;
  --color-tangent-periwinkle-300: #babce5;
  --color-tangent-periwinkle-400: #9a9cc8;
  --color-tangent-periwinkle-500: #7f80ac;
  --color-tangent-periwinkle-600: #64658f;
  --color-tangent-periwinkle-700: #4e4e77;
  --color-tangent-periwinkle-800: #3d3d5d;
  --color-tangent-periwinkle-900: #2e2e4a;
  --color-tangent-periwinkle-950: #1c1c30;
}