Mint Twist to After Dark Color Palette

About this palette

Mint Twist to After Dark is a 5-color muted palette: #9BC2B2 (Mint Twist), #FFF5F0 (Seashell), #6B4F61 (Hibernation), #758E99 (Cavolo Nero), #3D3237 (After Dark). It mixes turquoise, white, red, gray tones and feels balanced overall. The strongest text pairing is #FFF5F0 on #3D3237 with a contrast ratio of 11.45:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mint Twist	rgb(155, 194, 178)	hsl(155, 24%, 68%)
Seashell	rgb(255, 245, 240)	hsl(20, 100%, 97%)
Hibernation	rgb(107, 79, 97)	hsl(321, 15%, 36%)
Cavolo Nero	rgb(117, 142, 153)	hsl(198, 15%, 53%)
After Dark	rgb(61, 50, 55)	hsl(333, 10%, 22%)

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.

Aa11.45:1 Very good#FFF5F0 on #3D3237
Aa11.45:1 Very good#3D3237 on #FFF5F0
Aa6.71:1 Good#FFF5F0 on #6B4F61
Aa6.71:1 Good#6B4F61 on #FFF5F0
Aa6.29:1 Good#9BC2B2 on #3D3237
Aa6.29:1 Good#3D3237 on #9BC2B2
Aa3.69:1 Poor#9BC2B2 on #6B4F61
Aa3.69:1 Poor#6B4F61 on #9BC2B2

Color blindness preview

CSS variables

/* Mint Twist to After Dark — https://swatchly.xyz/palette/9bc2b2-fff5f0-6b4f61-758e99-3d3237 */
:root {
  --mint-twist: #9bc2b2;
  --seashell: #fff5f0;
  --hibernation: #6b4f61;
  --cavolo-nero: #758e99;
  --after-dark: #3d3237;
}

Tailwind CSS v4

/* Mint Twist to After Dark — https://swatchly.xyz/palette/9bc2b2-fff5f0-6b4f61-758e99-3d3237 */
@theme {
  --color-mint-twist: #9bc2b2;
  --color-mint-twist-50: #e0f7ed;
  --color-mint-twist-100: #d2ece1;
  --color-mint-twist-200: #b9d8cb;
  --color-mint-twist-300: #9bc2b2;
  --color-mint-twist-400: #7fa495;
  --color-mint-twist-500: #658a7b;
  --color-mint-twist-600: #4d7163;
  --color-mint-twist-700: #3a5b4e;
  --color-mint-twist-800: #2b483d;
  --color-mint-twist-900: #20392f;
  --color-mint-twist-950: #12231d;
  --color-seashell: #fff5f0;
  --color-seashell-50: #fff5f0;
  --color-seashell-100: #f2ece9;
  --color-seashell-200: #ded7d4;
  --color-seashell-300: #c8c0bc;
  --color-seashell-400: #a9a09c;
  --color-seashell-500: #8d8480;
  --color-seashell-600: #726a66;
  --color-seashell-700: #5b5350;
  --color-seashell-800: #47413d;
  --color-seashell-900: #37312f;
  --color-seashell-950: #221e1c;
  --color-hibernation: #6b4f61;
  --color-hibernation-50: #fff0f9;
  --color-hibernation-100: #f9e4f1;
  --color-hibernation-200: #e9d0df;
  --color-hibernation-300: #d5b9ca;
  --color-hibernation-400: #b799ac;
  --color-hibernation-500: #9d7e91;
  --color-hibernation-600: #826577;
  --color-hibernation-700: #6b4f61;
  --color-hibernation-800: #543d4c;
  --color-hibernation-900: #422e3b;
  --color-hibernation-950: #2a1c25;
  --color-cavolo-nero: #758e99;
  --color-cavolo-nero-50: #eaf9ff;
  --color-cavolo-nero-100: #dff0f7;
  --color-cavolo-nero-200: #cadde6;
  --color-cavolo-nero-300: #b1c7d1;
  --color-cavolo-nero-400: #90a9b4;
  --color-cavolo-nero-500: #758e99;
  --color-cavolo-nero-600: #5b737d;
  --color-cavolo-nero-700: #455b65;
  --color-cavolo-nero-800: #34474f;
  --color-cavolo-nero-900: #26373e;
  --color-cavolo-nero-950: #162227;
  --color-after-dark: #3d3237;
  --color-after-dark-50: #fbf3f6;
  --color-after-dark-100: #f1e8ec;
  --color-after-dark-200: #dfd4d9;
  --color-after-dark-300: #c9bdc2;
  --color-after-dark-400: #ab9ea4;
  --color-after-dark-500: #908389;
  --color-after-dark-600: #76696f;
  --color-after-dark-700: #5f5459;
  --color-after-dark-800: #4b4246;
  --color-after-dark-900: #3d3237;
  --color-after-dark-950: #261f22;
}